React-Router-redux Fehler beim Laden mit Middleware zu schaffen

Question

Ich bin neu zu reagieren-redux und zu versuchen, ein Tutorial zu folgen, das ist ein bisschen alt, so, wenn ich diesen Code versuchen laufen bekomme ich Fehler:

Uncaught Fehler: Es wurde erwartet, dass der Routingstatus entweder als state.routing oder als benutzerdefinierter Ausdruck verfügbar ist, den Sie als selectLocationState in den Optionen syncHistoryWithStore() angeben können. Stellen Sie sicher, dass Sie routerReducer zu den Reduzierern Ihres Geschäfts über combineReducers hinzugefügt haben oder welche Methode Sie auch verwenden, um Ihre Reduzierstücke zu isolieren.

Irgendwelche Tipps? :)

index.js

import React from 'react' 
import ReactDOM from "react-dom" 
import { createStore, applyMiddleware } from 'redux' 
import { Provider } from 'react-redux' 
import { Router, Route, browserHistory } from 'react-router' 
import { syncHistoryWithStore, routerReducer } from 'react-router-redux' 
import App from './containers/App' 
import rootReducer from './reducers/reducers' 
import thunkMiddleware from 'redux-thunk' 
import api from './middleware/api' 

let createStoreWithMiddleware = applyMiddleware(thunkMiddleware, api)(createStore) 

let store = createStoreWithMiddleware(rootReducer) 

let history = syncHistoryWithStore(browserHistory, store) 

let rootElement = document.getElementById('root') 

ReactDOM.render(
    <Provider store={store}> 
    <Router history={history}> 
     <Route path='/' component={App} /> 
    </Router> 
    </Provider>, 
    rootElement 
) 

meine reducers.js wie folgt aussieht:

import { combineReducers } from 'redux' 

import Auth from './auth' 
import Quotes from './quotes' 

const rootReducer = combineReducers({ 
    auth: Auth, 
    quotes: Quotes 
}) 

export default rootReducer 

Answer 1

Sie müssen die routerReducer() für die Synchronisation hinzufügen zu arbeiten reagieren-Router-redux.

Diese Reduzierfunktion speichert Ortsaktualisierungen aus dem Verlauf. Wenn Sie combineReducers verwenden, sollte es unter dem Routing-Schlüssel verschachtelt sein.

Enthalten Sie die folgenden in Ihren Mähdrescher Reduzierungen.

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

export const reducers = combineReducers({ 
    ... // other reducers 
    routing: routerReducer 
}); 

So sieht Ihre Reduzierungen Datei wie:

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

import Auth from './auth' 
import Quotes from './quotes' 

const rootReducer = combineReducers({ 
    auth: Auth, 
    quotes: Quotes, 
    routing: routerReducer 
}) 

export default rootReducer