無法使用react-router-redux syncHistoryWithStore使用redux-devtools-extension

Question

我無法在react-router-redux的syncHistoryWithStore中使用redux-devtools-extension。 我得到的錯誤是Uncaught TypeError：store.getState不是一個函數。

syncHistoryWithStore @ sync.js：38（匿名函數）@ store.js：30

我的store.js

import { createStore, applyMiddleware, compose } from 'redux';
import { syncHistoryWithStore } from 'react-router-redux';
import { browserHistory } from 'react-router';
import thunkMiddleware from 'redux-thunk';
import createLogger from 'redux-logger';
import rootReducer from './reducers/reducers';
import devTools from 'remote-redux-devtools';

const loggerMiddleware = createLogger()

import data from './dummydata/data'

// dummy data is an export of an array of objects
// 
// {
//  const data = [
//     {
//        "Id":"BAcyDyQwcXX",
//        "labels": ['P1', 'P2', 'P3', 'P4', 'P5/P6'],
//        "series": [[1, 2, 3, 4, 5]],
//        "total": 0
//     }
// ]
// }

const initialState = {
  data
};

//const store = createStore(rootReducer, initialState)
//it works when i use this, but when try to implement the devTools extension, 
//the error fires.

const store = function configureStore(initialState) {
  const storeCreator = createStore(rootReducer, initialState,
    window.devToolsExtension && window.devToolsExtension()
  );
  return storeCreator;
}

export const history = syncHistoryWithStore(browserHistory, store)

export default store;

我的rootReducer.js

import { combineReducers } from 'redux'
import { routerReducer } from 'react-router-redux';

function post(state = [], action) {
  console.log("state: ", state, "action: ", action);
  return state
}

const rootReducer = combineReducers({
  post, routing: routerReducer
})

export default rootReducer

我的main.js

import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';

import css from  './styles/stylesheets/style.css';

import store, { history } from './store';

import Main from './components/Main';
import Index from './components/Index';
import Single from './components/Single';
import GraphChart from './components/GraphChart';

import { Router, Route, IndexRoute } from 'react-router';

const router = (
  <Provider store={store}>
    <Router history={history}>
      <Route path="/" component={Main}>
        <IndexRoute component={GraphChart}></IndexRoute>
        <Route path="/view" component={Single}></Route>
      </Route>
    </Router>
  </Provider>
)

render(router, document.querySelector('#react-container'));

Answer 1

我認為這里的問題是你的商店是一個函數，它在你調用它時創建實際的商店而不是商店的實例。

嘗試這樣的事情。 將configureStore導出為myStore.js中的函數

import { createStore, applyMiddleware, compose } from 'redux';
import thunkMiddleware from 'redux-thunk';
import createLogger from 'redux-logger';
import rootReducer from './reducers/reducers';
import devTools from 'remote-redux-devtools';

const loggerMiddleware = createLogger()

export default function configureStore(initialState) {
   const storeCreator = createStore(rootReducer, initialState,
      window.devToolsExtension && window.devToolsExtension()
   );
   return storeCreator;
}

並在您的main.js中導入configureStore並使用此處的初始數據創建商店。 獲得商店實例后，您可以在這里同步存儲。

import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import data from './dummydata/data'
import css from  './styles/stylesheets/style.css';

import createStore from './store';
import { browserHistory } from 'react-router';
import { syncHistoryWithStore } from 'react-router-redux';
import Main from './components/Main';
import Index from './components/Index';
import Single from './components/Single';
import GraphChart from './components/GraphChart';

import { Router, Route, IndexRoute } from 'react-router';
const initialState = {
  data
};
const store = createStore(initialData)
const history = syncHistoryWithStore(browserHistory, store);

const router = (
  <Provider store={store}>
    <Router history={history}>
      <Route path="/" component={Main}>
        <IndexRoute component={GraphChart}></IndexRoute>
        <Route path="/view" component={Single}></Route>
      </Route>
    </Router>
  </Provider>
)

render(router, document.querySelector('#react-container'));