-routeur-React Redux erreur lors de la création middleware magasin avec

Question

Je suis nouveau à réagir-Redux et essayer de suivre un tutoriel qui est un peu vieux, alors quand je tente d'exécuter ce code j'obtiens l'erreur:

Uncaught Erreur: L'état de routage devait être disponible sous la forme state.routing ou sous la forme de l'expression personnalisée selectLocationState dans les options syncHistoryWithStore(). Assurez-vous d'avoir ajouté le routerReducer aux réducteurs de votre magasin via combineReducers ou quelle que soit la méthode que vous utilisez pour isoler vos réducteurs.

Des conseils? :)

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 
) 

mes reducers.js ressemble à ceci:

import { combineReducers } from 'redux' 

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

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

export default rootReducer 

Answer 1

Vous devez ajouter le routerReducer() pour la synchronisation de travailler dans React-routeur-Redux.

Cette fonction de réduction stocke les mises à jour de localisation de l'historique. Si vous utilisez combineReducers, il doit être imbriqué sous la clé de routage.

Incluez ce qui suit dans vos réducteurs de moissonneuses-batteuses.

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

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

donc votre fichier Réducteurs ressemble:

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