Redux-persist白名单传入reducer名称无效，数据无法持久化

核心问题定位 #

你当前的配置存在持久化Reducer范围不匹配的问题，导致Redux Persist无法正确触发数据存储，同时调试日志无输出。

具体修复步骤 #

1. 修正Persist Reducer配置逻辑 #

你仅对userReducer做了持久化包装，但persistConfig的whitelist却指定了["user", "taskForm"]——这个白名单是针对被包装的Reducer的state字段，而非整个Store的reducer键名。正确的做法是先组合所有需要持久化的Reducer，再整体包裹persistReducer：

import { combineReducers } from '@reduxjs/toolkit';
import { persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import userReducer from './path/to/userReducer';
import taskFormReducer from './path/to/taskFormReducer';

// 1. 组合根Reducer
const rootReducer = combineReducers({
  user: userReducer,
  taskForm: taskFormReducer
});

// 2. 配置持久化规则
const persistConfig = {
  key: "root",
  storage,
  whitelist: ["user", "taskForm"] // 这里的字段对应根Reducer的键名
};

// 3. 用persistReducer包裹根Reducer
const persistedReducer = persistReducer(persistConfig, rootReducer);

// 4. 创建Store
export const store = configureStore({
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false,
    }),
});

export const persistor = persistStore(store);

2. 确认Storage导入正确性 #

确保你导入的是Redux Persist默认的localStorage：

import storage from 'redux-persist/lib/storage';

若误导入其他存储引擎（如sessionStorage），数据会存在非预期的位置，导致Application面板看不到内容。

3. 验证Reducer的状态更新逻辑 #

即使dispatch有日志输出，也要确认userReducer是否正确处理了setUser action，遵循Redux的不可变更新原则：

// 示例userReducer正确写法
const initialState = {
  userData: null,
  token: null
};

const userReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'setUser':
      // 必须返回新对象，不能直接修改原state
      return {
        ...state,
        userData: action.payload.userData,
        token: action.payload.token
      };
    default:
      return state;
  }
};

若Reducer未正确更新state，Redux Persist不会触发存储操作。

4. 重启应用验证调试日志 #

修改配置后重启应用，登录成功后查看控制台，开启debug=true的PersistGate应该会输出类似persist/REHYDRATE、persist/PERSIST的日志，同时浏览器Application面板的LocalStorage中会出现persist:root键值对。

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