2016-05-29 13 views
3

Ich kann redux-devtools-extension mit react-router-redux's syncHistoryWithStore nicht verwenden. Der Fehler, den ich bekomme, ist Uncaught TypeError: store.getState ist keine Funktion.kann redux-devtools-extension mit react-router-redux nicht verwenden syncHistoryWithStore

syncHistoryWithStore @ sync.js: 38 (anonyme Funktion) @ store.js: 30

mein 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; 

mein 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 

mein Haupt .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')); 
+0

Dieses Video erklärt, wie redux devtool mit basic reactive redux app verbunden wird - https://youtu.be/TSOVLXQPWgA – Prem

Antwort

1

Ich denke, das Problem hier ist, dass Ihr Geschäft eine Funktion ist, die den tatsächlichen Speicher erstellt, wenn Sie es aufrufen und nicht die Instanz eines Geschäfts ist.

Versuchen Sie etwas wie das. Export configureStore als Funktion in 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; 
} 

und in Ihrem main.js importieren Sie die configureStore und erstellen Sie den Laden mit den Ausgangsdaten von hier. Sobald Sie die Instanz des Geschäfts erhalten haben, können Sie hier synchHistoryWithStore verwenden.

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')); 
Verwandte Themen