react-router-reduxでredux-devtools-extensionを使用できませんsyncHistoryWithStore

Question

react-router-reduxのsyncHistoryWithStoreでredux-devtools-extensionを使用することができません。私が取得するエラーはUncaught TypeErrorです：store.getStateは関数ではありません。 sync.js @

syncHistoryWithStore：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 

私のメイン：store.js @ 38 （匿名関数） .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

私はここでの問題は、あなたのストアは、あなたがそれを呼び出すときに実際のストアを作成する関数であり、ストアのインスタンスではないということです。

このようなものを試してみてください。 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は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'));