如何使用redux-persist仅持久化redux store的部分字段到localStorage

解决方案 #

核心思路是给每个子reducer单独配置持久化规则，通过子配置的whitelist参数指定仅需要持久化的字段即可，无需在根级持久化配置中白名单整个reducer。

1. 修改rootReducer.js配置

完整修改后代码如下：

import { combineReducers } from 'redux';
import userSignupReducer from './UserSignup/UserSignupReducer';
import userLoginReducer from './UserLogin/UserLoginReducer';
import { persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import autoMergeLevel1 from 'redux-persist/lib/stateReconciler/autoMergeLevel1';

// userSignup reducer 专属持久化配置
const userSignupPersistConfig = {
  key: 'userSignup',
  storage,
  whitelist: ['userData'], // 仅持久化userData字段
  stateReconciler: autoMergeLevel1 // 按你的需求配置状态合并规则
};

// userLogin reducer 专属持久化配置
const userLoginPersistConfig = {
  key: 'userLogin',
  storage,
  whitelist: ['isLoggedIn'], // 仅持久化isLoggedIn字段
};

const rootReducer = combineReducers({
  userSignup: persistReducer(userSignupPersistConfig, userSignupReducer),
  userLogin: persistReducer(userLoginPersistConfig, userLoginReducer),
});

export default rootReducer;

2. 注意事项

• 原store.js代码无需修改，保持现有配置即可正常使用。
• 配置更新后请清空浏览器localStorage中的旧缓存，避免之前全量持久化的残留数据和新规则冲突导致状态异常。
• 你提供的userLoginReducer.js存在拼写不一致问题：initialState中定义的是isloggedIn（首字母小写l），但登录成功的逻辑里赋值的是isLoggedIn（首字母大写L），请修正为统一拼写，否则持久化和状态读取会失效。

内容的提问来源于stack exchange，提问作者Sanketh B. K