如何在Redux Persist中仅持久化嵌套状态的drawer字段？

你遇到的问题是Redux-Persist默认会持久化整个ui reducer，但你只需要其中的drawer字段。这里有两种简洁的解决方案，都能精准实现你的需求：

方案一：单独为UI Reducer配置持久化规则（推荐） #

这种方式更直观，把UI字段的持久化规则和其他reducer解耦，后续维护起来更方便。

修改你的代码如下：

import { applyMiddleware, combineReducers, createStore } from "redux";
import thunk from "redux-thunk";
import { persistStore, persistReducer } from "redux-persist";
import storage from "redux-persist/lib/storage";
import logger from "redux-logger";
import other_0_reducer from "./other_0_reducer";
import other_1_reducer from "./other_1_reducer";
import ui_reducer from "./ui_reducer";

// 1. 为UI reducer单独设置持久化规则
const uiPersistConfig = {
  key: "ui",
  storage,
  blacklist: ["dialog"] // 排除dialog字段，只持久化剩下的drawer
  // 也可以用 whitelist: ["drawer"]，明确指定只持久化drawer，效果完全一致
};

// 生成带持久化规则的UI reducer
const persistedUiReducer = persistReducer(uiPersistConfig, ui_reducer);

// 2. 合并所有reducer，使用处理后的UI reducer
const rootReducer = combineReducers({
  other_0: other_0_reducer,
  other_1: other_1_reducer,
  ui: persistedUiReducer,
});

// 3. 根级持久化配置（这里不需要额外的whitelist，因为UI已经单独配置了）
const rootPersistConfig = {
  key: "root",
  storage,
};

const persistedRootReducer = persistReducer(rootPersistConfig, rootReducer);
const store = createStore(persistedRootReducer, applyMiddleware(thunk, logger));
let persistor = persistStore(store);

export { store, persistor };

方案二：使用Transforms过滤字段 #

如果不想修改reducer的结构，也可以用Redux-Persist的createTransform API，在持久化/恢复数据时手动过滤字段：

import { applyMiddleware, combineReducers, createStore } from "redux";
import thunk from "redux-thunk";
import { persistStore, persistReducer, createTransform } from "redux-persist";
import storage from "redux-persist/lib/storage";
import logger from "redux-logger";
import other_0_reducer from "./other_0_reducer";
import other_1_reducer from "./other_1_reducer";
import ui_reducer from "./ui_reducer";

// 获取UI reducer的初始状态，用于恢复时补全默认字段
const uiInitialState = ui_reducer(undefined, { type: undefined });

// 创建自定义转换规则，只处理UI字段
const uiTransform = createTransform(
  // 持久化时：只保留drawer字段
  (inboundState) => ({ drawer: inboundState.drawer }),
  // 恢复时：将保存的drawer与初始状态合并，确保dialog使用默认值
  (outboundState) => ({ ...uiInitialState, ...outboundState }),
  { whitelist: ["ui"] } // 仅对UI这个state key应用该转换
);

const pConfig = {
  key: "root",
  storage: storage,
  whitelist: ["ui"],
  transforms: [uiTransform] // 添加自定义转换规则
};

const rootReducer = combineReducers({
  other_0: other_0_reducer,
  other_1: other_1_reducer,
  ui: ui_reducer,
});

const pReducer = persistReducer(pConfig, rootReducer);
const store = createStore(pReducer, applyMiddleware(thunk, logger));
let persistor = persistStore(store);

export { store, persistor };

验证效果 #

修改drawer的状态后刷新页面，drawer会保持之前的状态，而dialog会自动回到初始值false，完全符合你的需求。

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