React+Redux router=未捕获错误:要求reducer是一个函数

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

本文关键字:函数 一个 reducer 要求 router 错误 React+Redux      更新时间:2023-09-26

我的代码运行良好,但每当我犯了编码错误并出现运行时错误时,我都会遇到一个恼人的问题。例如,在我的一个JSX页面中,我使用了Date()而不是new Date(),并且没有报告实际错误,我得到了。。。

Uncaught Error: Expected the reducer to be a function.

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

有没有一种方法可以让我获得更好的错误报告,帮助我识别真正的问题?非常感谢任何帮助或想法!!!

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

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

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

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

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;
    }
}

更改以下行:

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

收件人:

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

每当您想要导出该变量时,请使用export const variable_name而不是const variable_name

例如: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;

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

我的问题是从根reducer路径导入Store,而不是从实际的捆绑存储根路径导入Store(窗口上有devtools和根reduce,正在组成中间件等)。

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

更改为

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