设置连接的 React 路由器

Question

我正在尝试根据自述文件中的步骤设置连接路由器。

我的商店里有这个当前的代码.js：

import { createStore } from 'redux';
import reducer from './reducers';
import { middleware, runSagas } from './middleware';
const createSWStore = () => {
const store = createStore(reducer, middleware);
runSagas();
return store;
};
export default createSWStore;

我尝试按照设置进行操作，但浏览器中不断收到Uncaught TypeError: rootReducer is not a function错误。

当前文件如下所示：

import { createBrowserHistory } from 'history';
import { applyMiddleware, compose, createStore } from 'redux';
import { connectRouter, routerMiddleware } from 'connected-react-router';
import reducer from './reducers';
import { middleware, runSagas } from './middleware';
const history = createBrowserHistory();
const createSWStore = () => {
const store = createStore(
connectRouter(reducer)(history),
compose(
applyMiddleware(
routerMiddleware(history),
),
),
middleware);
runSagas();
return store;
};
export default createSWStore;

Answer 1

给 connectRouterhistory而不是化简器。所以：

connectRouter(history)(reducer),

而不是connectRouter(reducer)(history).

你说import reducer from './reducers';指的是包含减速器的文件夹。假设reducers文件夹有三个文件(index.js，reducer1.js和reducer2.js(，那么在reducers中具有这样的东西应该可以工作：

索引.js

import reducer1 from './reducer1';
import reducer2 from './reducer2';
import { combineReducers } from 'redux';
export default combineReducers({ reducer1, reducer2 });

减速器1.js

const reducer1 = (state = { myState: "foo" }, action) => {
return state;
};
export default reducer1;

减速器2.js

const reducer2 = (state = { myState: "bar" }, action) => {
return state;
};
export default reducer2;