Redux Toolkit：错误：“reducer”是必需参数，并且必须是可以传递给combineReducers的函数或函数对象

Question

使用这段代码，我没有收到任何错误。

import {combineReducers, configureStore} from '@reduxjs/toolkit';
import {menuReducer as menu} from './menu';
import {cartReducer as cart} from './shoppingCart';
import {optionsReducer as options} from './optionsItem';
import {homeReducer as home} from './home';
import {rewardReducer as reward} from './reward';
import {ordersReducer as orders} from './orders';
import {authReducer as auth} from './auth';
import giftCardReducer from '../store/giftCard';
import paymentMethodReducer from './paymentMethod';
import paymentToken from "./paymentToken";
import qRCode from "./qRCode";
import orderHistory from './orderHistory';
import orderDetail from './orderDetail';
import showCompletedOrder from './showCompletedOrder';
import paymentOptionsSummary from './paymentOptionsSummary';
import usersUpdate from './usersUpdate';
import referAFriend from './referAFriend';
import resetPassword from './resetPassword';

const reducer = combineReducers({
  menu,
  auth,
  giftCardReducer,
  paymentMethodReducer,
  cart,
  options,
  orders,
  home,
  reward,
  paymentToken,
  qRCode,
  orderHistory,
  orderDetail,
  showCompletedOrder,
  paymentOptionsSummary,
  usersUpdate,
  referAFriend,
  resetPassword
});
export {menuActions} from './menu';
export {cartActions} from './shoppingCart';
export {optionsActions} from './optionsItem';
export {ordersActions} from './orders';
export {authActions} from './auth';
export {homeActions} from './home';
export {rewardActions} from './reward';

export type rootState = ReturnType<typeof reducer>;

export default configureStore({
  reducer:reducer
});


const rootReducer = (state, action) => {
  if (action.type === 'auth/logout') { // check for action type 
    state = undefined;
  }
  return reducer(state, action);
};

如果我将其更改为下面的代码，我会收到提到的错误。

import {combineReducers, configureStore} from '@reduxjs/toolkit';
import {menuReducer as menu} from './menu';
import {cartReducer as cart} from './shoppingCart';
import {optionsReducer as options} from './optionsItem';
import {homeReducer as home} from './home';
import {rewardReducer as reward} from './reward';
import {ordersReducer as orders} from './orders';
import {authReducer as auth} from './auth';
import giftCardReducer from '../store/giftCard';
import paymentMethodReducer from './paymentMethod';
import paymentToken from "./paymentToken";
import qRCode from "./qRCode";
import orderHistory from './orderHistory';
import orderDetail from './orderDetail';
import showCompletedOrder from './showCompletedOrder';
import paymentOptionsSummary from './paymentOptionsSummary';
import usersUpdate from './usersUpdate';
import referAFriend from './referAFriend';
import resetPassword from './resetPassword';

const reducer = combineReducers({
  menu,
  auth,
  giftCardReducer,
  paymentMethodReducer,
  cart,
  options,
  orders,
  home,
  reward,
  paymentToken,
  qRCode,
  orderHistory,
  orderDetail,
  showCompletedOrder,
  paymentOptionsSummary,
  usersUpdate,
  referAFriend,
  resetPassword
});
export {menuActions} from './menu';
export {cartActions} from './shoppingCart';
export {optionsActions} from './optionsItem';
export {ordersActions} from './orders';
export {authActions} from './auth';
export {homeActions} from './home';
export {rewardActions} from './reward';

export type rootState = ReturnType<typeof reducer>;

export default configureStore({
  reducer:rootReducer
});


const rootReducer = (state, action) => {
  if (action.type === 'auth/logout') { // check for action type 
    state = undefined;
  }
  return reducer(state, action);
};

Answer 1

当我在客户端 index.js 文件中配置 redux 存储时，我在 React 中也遇到了这个问题。这是我的代码产生的错误：

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { configureStore } from "@reduxjs/toolkit";
import { Provider } from "react-redux";
import allReducers from "./redux/reducer";

const store = configureStore({ allReducers });

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById("root")
);

快速修复：正如错误所示，"reducer" is a required argument...所以，我只是修改了我的存储常量，如下所示：configureStore({reducer: allReducers})。我只是将“reducer”作为键，并allReducers作为它的值传递。然后我的问题就解决了。

Answer 2

试试这个方法

import { configureStore } from '@reduxjs/toolkit'
import { combineReducers } from 'redux'
const reducer = combineReducers({
  // here we will be adding reducers
})
const store = configureStore({
  reducer,
})
export default store;

详情请点击这里

Answer 3

事实上我得到了解决方案。

显示此错误是因为我已将该rootReducer函数放在配置存储下方，这就是减速器 id 未获取该rootReducer函数的原因。

所以，当我把它向上移动时，它就工作正常了。