使用中间件创建存储时出现反应路由器冗余错误

Question

我是 react-redux 的新手，并试图遵循一个有点旧的教程，所以当我尝试运行这段代码时，我收到错误：

未捕获错误：预期路由状态可用作state.routing或可在syncHistoryWithStore()选项中指定为selectLocationState的自定义表达式。确保您已通过combineReducers或用于隔离减速器的任何方法将routerReducer添加到商店的减速器中。

有什么提示吗？:)

索引.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
)

我的减速器.js看起来像这样：

import { combineReducers } from 'redux'
import Auth from './auth'
import Quotes from './quotes'
const rootReducer = combineReducers({
    auth: Auth,
    quotes: Quotes
})
export default rootReducer

Answer 1

您必须添加 routerReducer(( 才能在 react-router-redux 中工作以进行同步。

此缩减器功能存储历史记录中的位置更新。如果你使用组合化简器，它应该嵌套在路由键下。

在联合收割机中包括以下内容。

import { routerReducer } from 'react-router-redux';
export const reducers = combineReducers({
  ...  // other reducers
  routing: routerReducer
});

所以你的化简器文件看起来像：

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