引入redux-persist后Redux状态全部返回undefined的问题求助

核心问题 #

1. 未引入ModalSlice到Store：当前store仅配置了持久化后的UserSlice，完全没有加入ModalSlice，导致Redux状态树中不存在modal节点，所以useSelector(state => state.modal.xxx)必然返回undefined。
2. 持久化配置错误：直接将persistedReducer作为根reducer，而非合并所有slice的reducer，导致非持久化的slice丢失。

修复步骤 #

1. 修改store.js，合并所有Slice并仅持久化UserSlice

import { configureStore } from "@reduxjs/toolkit";
import userSlice from "./userSlice";
import modalSlice from "./ModalSlice"; // 导入ModalSlice
import storage from "redux-persist/lib/storage";
import { persistReducer, persistStore } from "redux-persist";
import { getDefaultMiddleware } from "@reduxjs/toolkit";

const persistConfig = {
  key: "user", // 改为user而非root，避免污染整个状态树
  storage,
};

// 仅对UserSlice应用持久化包装
const persistedUserReducer = persistReducer(persistConfig, userSlice);

// 合并所有reducer：持久化的user + 普通的modal
export const store = configureStore({
  reducer: {
    user: persistedUserReducer,
    modal: modalSlice // 加入ModalSlice
  },
  devTools: process.env.NODE_ENV !== "production",
  // 配置middleware，忽略redux-persist的序列化检查
  middleware: getDefaultMiddleware({
    serializableCheck: {
      ignoredActions: ["persist/PERSIST", "persist/REHYDRATE"],
    },
  }),
});

export const persistor = persistStore(store);

2. 确认ModalSlice的导出格式

确保ModalSlice.js的结尾正确导出reducer：

// ModalSlice.js示例
import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  loginModalOpen: false,
  signupModalOpen: false,
  passwordModalOpen: false
};

const modalSlice = createSlice({
  name: "modal",
  initialState,
  reducers: {
    openLoginModal: (state) => { state.loginModalOpen = true },
    // 其他modal相关action
  }
});

export const { openLoginModal /* 其他action */ } = modalSlice.actions;
export default modalSlice.reducer; // 必须导出reducer

3. 验证组件中的状态获取

组件中useSelector的写法保持不变即可，因为状态树现在包含user和modal两个节点：

const isLoginOpen = useSelector((state) => state.modal.loginModalOpen);
const currentUser = useSelector((state) => state.user.currentUser);

关键注意事项 #

• 仅对需要持久化的slice使用persistReducer包装，其他slice直接加入根reducer
• 使用getDefaultMiddleware忽略redux-persist的序列化检查，避免开发环境出现警告
• 持久化的key建议设置为slice名称（如"user"），而非"root"，这样持久化的数据只会存储该slice的内容，更清晰

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