如何用redux-persist仅持久化userReducer中的placeOfLiving子状态？

假设你的userReducer代码如下：

const initialState = {
  name: '',
  age: 0,
  placeOfLiving: {
    city: '',
    country: ''
  }
};

const userReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'UPDATE_PLACE_OF_LIVING':
      return { ...state, placeOfLiving: action.payload };
    // 其他action处理逻辑
    default:
      return state;
  }
};

export default userReducer;

常规Redux配置大致如下：

import { createStore, combineReducers } from 'redux';
import userReducer from './userReducer';

const rootReducer = combineReducers({
  user: userReducer
});

const store = createStore(rootReducer);

export default store;

下面基于redux-persist（Redux生态最常用的持久化库）提供两种实现方案：

方案1：自定义Transform（不改动现有reducer结构） #

这种方式无需调整现有reducer的拆分逻辑，通过自定义转换规则只持久化目标子状态：

1. 安装依赖（未安装的话）

npm install redux-persist
# 或 yarn add redux-persist

2. 修改Redux配置，添加持久化逻辑

import { createStore } from 'redux';
import { persistStore, persistReducer, createTransform } from 'redux-persist';
import storage from 'redux-persist/lib/storage'; // 默认使用localStorage
import userReducer from './userReducer';

// 自定义转换规则：只提取和恢复placeOfLiving
const placeOfLivingTransform = createTransform(
  // 持久化时：从user状态中仅取出placeOfLiving
  (inboundState) => ({ placeOfLiving: inboundState.placeOfLiving }),
  // 恢复(hydrate)时：将保存的placeOfLiving合并回原user状态
  (outboundState, originalState) => ({
    ...originalState,
    placeOfLiving: outboundState.placeOfLiving || originalState.placeOfLiving
  }),
  // 指定该转换仅作用于user reducer
  { whitelist: ['user'] }
);

const persistConfig = {
  key: 'root',
  storage,
  whitelist: ['user'], // 只对user reducer应用持久化
  transforms: [placeOfLivingTransform] // 应用自定义转换规则
};

// 生成持久化后的reducer
const persistedReducer = persistReducer(persistConfig, rootReducer);

// 创建store和persistor
const store = createStore(persistedReducer);
const persistor = persistStore(store);

export { store, persistor };

方案2：拆分reducer（更清晰的长期维护方案） #

如果允许调整reducer结构，把placeOfLiving拆成独立reducer，直接通过redux-persist的白名单指定持久化目标：

1. 拆分reducer

// placeOfLivingReducer.js
const initialState = {
  city: '',
  country: ''
};

export default (state = initialState, action) => {
  switch (action.type) {
    case 'UPDATE_PLACE_OF_LIVING':
      return { ...state, ...action.payload };
    default:
      return state;
  }
};

// userReducer.js
import { combineReducers } from 'redux';
import placeOfLivingReducer from './placeOfLivingReducer';

const userInfoReducer = (state = { name: '', age: 0 }, action) => {
  // 处理name、age的更新逻辑
  default:
    return state;
};

// 合并user相关的子reducer
export default combineReducers({
  info: userInfoReducer,
  placeOfLiving: placeOfLivingReducer
});

2. 修改Redux配置

import { createStore, combineReducers } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import userReducer from './userReducer';

const rootReducer = combineReducers({
  user: userReducer
});

const persistConfig = {
  key: 'root',
  storage,
  // 直接指定要持久化的子reducer路径
  whitelist: ['user.placeOfLiving']
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

const store = createStore(persistedReducer);
const persistor = persistStore(store);

export { store, persistor };

额外说明 #

• 如果你用的是Redux Toolkit，只需把createStore替换为configureStore，传入persistedReducer即可，逻辑完全兼容。
• 恢复状态时，确保初始状态结构与持久化结构一致，避免出现undefined导致的渲染问题。

内容的提问来源于stack exchange，提问作者four-eyes