javascript React + Redux-router = 未捕获的错误：期望 reducer 是一个函数

React + Redux-router = Uncaught Error: Expected the reducer to be a function

提问by baronnoraz

My code is working fine, but I have an annoying problem whenever I make a coding mistake and get a runtime error. For instance, in one of my JSX pages I did Date()instead of new Date()and instead of reporting the actual error, I got...

我的代码运行良好，但是每当我犯编码错误并出现运行时错误时，我都会遇到一个烦人的问题。举例来说，在我的JSX网页一个我做Date()的，而不是new Date()和报告，而不是实际的错误，我...

Uncaught Error: Expected the reducer to be a function.

Any error I make almost always shows up as this. It's being reported from createStore.js, which is in my configureStore.jsxcode below.

我犯的任何错误几乎总是这样显示。它是从 报告的createStore.js，在我configureStore.jsx下面的代码中。

Is there a way that I can get better error reporting that helps me identify the real problem? Any help or ideas are greatly appreciated!!!

有什么方法可以获得更好的错误报告来帮助我确定真正的问题吗？非常感谢任何帮助或想法！！！

Here's my setup for reference....

这是我的设置供参考....

main.jsx

主文件

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { ReduxRouter } from 'redux-router';
import configureStore from './store/configureStore'
import routes from './routes';

const rootEl = document.getElementById('app-container');

const store = configureStore();

ReactDOM.render(
    <div>
        <Provider store={store}>
            <ReduxRouter routes={routes} />
        </Provider>
    </div>
    , rootEl
);

configureStore.jsx

配置Store.jsx

import { createHashHistory } from 'history';
import { applyMiddleware, createStore, compose } from 'redux';
import { reduxReactRouter } from 'redux-router';

import thunk from 'redux-thunk';
import promiseMiddleware from 'redux-promise-middleware';

import rootReducer from '../reducers/rootReducer';
import routes from '../routes';

export default function configureStore(initialState = {}) {

    const history = createHashHistory();

    const middlewares = [
        thunk,
        promiseMiddleware({
            promiseTypeSuffixes: ['PENDING','SUCCESS','ERROR']
        })
    ];

    const toolChain = [
        applyMiddleware(...middlewares),
        reduxReactRouter({
            routes,
            history
        })
    ];

    const store = compose(...toolChain)(createStore)(rootReducer, initialState);

    if (module.hot) {
        module.hot.accept('../reducers', () => {
            const nextRootReducer = require('../reducers/rootReducer');
            store.replaceReducer(nextRootReducer);
        });
    }
    return store;
}

rootReducer.jsx

rootReducer.jsx

import { combineReducers } from 'redux';
import { routerStateReducer } from 'redux-router';
import siteReducer from './siteReducer';

const rootReducer = combineReducers({
    router: routerStateReducer,
    sites: siteReducer
});
export default rootReducer;

siteReducer.jsx

siteReducer.jsx

import {GET_SITES} from '../actions/siteActions';

const defaultState = {
    isPending: null,
    isSuccess: null,
    isError: null,
    error: null,
    data: null
};

export default function siteReducer(state = defaultState, action) {

    switch (action.type) {
        case `${GET_SITES}_PENDING`:
            return {
                ...defaultState,
                isPending: true
            };
        case `${GET_SITES}_SUCCESS`:
            return {
                ...defaultState,
                isSuccess: true,
                error: false,
                data: action.payload
            };
        case `${GET_SITES}_ERROR`:
            return {
                ...defaultState,
                isError: true,
                error: action.payload
            };
        default:
            return state;
    }
}

回答by danludwig

Change the following line:

更改以下行：

const nextRootReducer = require('../reducers/rootReducer');

To:

到：

const nextRootReducer = require('../reducers/rootReducer').default;

回答by Umang Gupta

Use export const variable_nameinstead of const variable_namewhenever you want to export that variable.

在您想要导出该变量时使用export const variable_name而不是const variable_name。

For ex: rootReducer.jsx should be re-written as

例如：rootReducer.jsx 应该重写为

import { combineReducers } from 'redux';
import { routerStateReducer } from 'redux-router';
import siteReducer from './siteReducer';

export const rootReducer = combineReducers({
router: routerStateReducer,
sites: siteReducer
});
export default rootReducer;

Note the extra export specifier with const rootReducer

注意带有 const rootReducer 的额外导出说明符

回答by racemic

My issue was importing Store from the root reducer path rather than the actual bundled store root (with devtools on the window and root reducer, middleware being composed, etc).

我的问题是从根减速器路径而不是实际捆绑的存储根导入 Store（窗口上有 devtools 和根减速器，正在组合中间件等）。

import Store from '../../../src/state/Store/reducer';

import Store from '../../../src/state/Store/reducer';

changed to

变成

import Store from '../../../src/state/Store';

import Store from '../../../src/state/Store';