使用combineReducer整合Redux-Persist时触发reducer参数错误

问题根源 #

错误的核心原因有三个：

• configureStore 调用方式错误，未传入正确的配置对象
• reducers 文件中变量声明不规范
• index.js 中同时混用了未持久化的 store 和持久化的 persistor

分步修复 #

1. 修正 configureStore.js 的配置 #

@reduxjs/toolkit 的 configureStore 需要接收配置对象，而非直接传入 reducer。修改后的代码：

import { persistStore, persistReducer } from "redux-persist";
import storage from "redux-persist/lib/storage"; // defaults to localStorage for web

import rootReducers from "./reducers";
import { configureStore } from "@reduxjs/toolkit";

const persistConfig = {
  key: "root",
  storage,
};

const persistedReducer = persistReducer(persistConfig, rootReducers);

export default () => {
  // 传入包含reducer的配置对象
  let store = configureStore({ reducer: persistedReducer });
  let persistor = persistStore(store);
  return { store, persistor };
};

2. 修正 reducers 文件的变量声明 #

原代码直接赋值未声明的变量属于不规范写法，修改为：

import fetchingReducer from "./fetchingProductsSlice";
import LoadingErrorReducer from "./Loading-ErrorSlice";
import authReducer from "./AuthSlice";
import cartReducer from "./CartSlice";
import favReduer from "./Fav/FavSlice";
import { combineReducers } from "@reduxjs/toolkit";

// 先声明变量再导出
const rootReducers = combineReducers({
  products: fetchingReducer,
  loadingerror: LoadingErrorReducer,
  auth: authReducer,
  cart: cartReducer,
  fav: favReduer,
});

export default rootReducers;

3. 修正 index.js 中的 Store 使用 #

原代码同时引入了未持久化的 store 和持久化的 persistor，导致状态不匹配。应使用 configureStore.js 返回的持久化 store：

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import { Provider } from "react-redux";
import { PersistGate } from "redux-persist/integration/react";
import createPersistedStore from "./Store/configureStore";

// 获取持久化后的store和persistor
const { store, persistor } = createPersistedStore();

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <App />
      </PersistGate>
    </Provider>
  </React.StrictMode>
);

4. 移除 Slice 中多余的 Switch 语句 #

createSlice 会自动根据定义的 reducers 生成对应的 action type 和处理逻辑，无需手动添加 switch 语句。还原 slice 代码：

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  cartItems: [],
  isAdded: false,
};

const cartSlice = createSlice({
  name: "cart",
  initialState,
  reducers: {
    getCartItems(state, action) {
      state.cartItems = action.payload;
    },
    setIsAdded(state, action) {
      state.isAdded = action.payload;
    },
  },
});

export const { getCartItems, setIsAdded } = cartSlice.actions;

export default cartSlice.reducer;

内容的提问来源于stack exchange，提问作者mostafa ibrahim