如何在redux-persist中为不同Reducer配置不同存储方式

要实现auth reducer用localStorage，其余指定reducer用sessionStorage，可以通过为不同Reducer单独配置redux-persist规则来实现，具体步骤如下：

1. 补充导入依赖 #

首先需要导入localStorage（原配置只导入了sessionStorage）：

import localStorage from "redux-persist/lib/storage";

2. 拆分持久化配置 #

分别为auth和其他需要持久化的Reducer创建独立的persist配置：

// Auth专属配置：使用localStorage
const authPersistConfig = {
  key: "auth",
  storage: localStorage,
  // 可选：如果auth中有不需要持久化的临时字段，可添加blacklist
  // blacklist: ['tempVerificationCode']
};

// 其他Reducer配置：使用sessionStorage，排除auth（单独处理）
const rootPersistConfig = {
  key: "root",
  storage: sessionStorage,
  whitelist: ["cart"], // 保留你需要用sessionStorage持久化的Reducer
  blacklist: ["auth"], // 排除auth，避免重复持久化
};

3. 创建独立的持久化Reducer #

拆分原rootReducer，分别生成auth和其他部分的持久化Reducer，再合并：

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

// 生成auth的持久化Reducer
const persistedAuthReducer = persistReducer(authPersistConfig, rootReducer.auth);

// 移除原rootReducer中的auth，生成剩余部分的Reducer对象
const rootReducerWithoutAuth = {
  ...rootReducer,
  auth: undefined,
};

// 生成剩余部分的持久化Reducer
const persistedRootReducer = persistReducer(rootPersistConfig, rootReducerWithoutAuth);

// 合并所有持久化Reducer与apiSlice（如果项目用到RTK Query）
const combinedReducer = combineReducers({
  ...persistedRootReducer,
  auth: persistedAuthReducer,
  [apiSlice.reducerPath]: apiSlice.reducer,
});

4. 配置Store并导出 #

更新configureStore的reducer配置，同时补充apiSlice的中间件（如果项目用到）：

const store = configureStore({
  reducer: combinedReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false, // 保持原配置不变
    }).concat(apiSlice.middleware), // 加入RTK Query的中间件
});

setupListeners(store.dispatch);
export const persistor = persistStore(store);
export default store;

原理说明 #

通过拆分Reducer并分别配置persist规则，redux-persist会为auth和其他Reducer使用各自指定的存储引擎：

• auth的状态会被持久化到localStorage，页面刷新或浏览器重启后依然保留
• 其他指定Reducer（如cart）的状态会被持久化到sessionStorage，浏览器关闭后自动清除

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