Настройка подключенного маршрутизатора React

Question

Я пытаюсь настроить подключенный-реагирующий-маршрутизатор в соответствии с шагами в README.

У меня есть этот текущий код в моем store.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

Дайте connectRouter свой history вместо редуктора. Так:

connectRouter(history)(reducer),

вместо connectRouter(reducer)(history),

Вы сказали, что import reducer from './reducers'; относится к папке, содержащей редукторы. Если предположить, что в папке Redurs есть три файла (index.js, reducer1.js и reducer2.js), то в папке reducers должно сработать:

index.js

import reducer1 from './reducer1';
import reducer2 from './reducer2';
import { combineReducers } from 'redux';

export default combineReducers({ reducer1, reducer2 });

reducer1.js

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

export default reducer1;

reducer2.js

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

export default reducer2;