如何在Redux Persist中仅持久化嵌套的current_theme.palette.mode状态

redux-persist的whitelist只支持匹配顶层state的key，不支持嵌套路径（比如current_theme.palette.mode这种写法无效）。要实现仅持久化指定的嵌套字段，需要使用它提供的createTransform自定义转换逻辑。

具体实现步骤： #

1. 导入所需的工具函数

import { persistReducer, createTransform } from 'redux-persist';

2. 创建自定义转换规则

const themeModeTransform = createTransform(
  // 【inbound】：将原始state转换为要持久化的精简数据
  (state) => {
    // 仅提取需要持久化的current_theme.palette.mode，保持对应结构
    return {
      current_theme: {
        palette: {
          mode: state.current_theme?.palette?.mode
        }
      }
    };
  },
  // 【outbound】：将持久化的数据合并回原始state结构
  (persistedState, originalState) => {
    // 把存储的mode值覆盖回原state，其余字段保持原有状态不变
    return {
      ...originalState,
      current_theme: {
        ...originalState.current_theme,
        palette: {
          ...originalState.current_theme.palette,
          mode: persistedState.current_theme.palette.mode
        }
      }
    };
  },
  // 可选：指定该转换仅对当前reducer生效（如果有多个reducer的话）
  { whitelist: ['theme'] }
);

3. 在persistReducer中配置自定义转换

const persistedReducer = persistReducer(
  {
    key: 'theme',
    storage,
    transforms: [themeModeTransform] // 加入自定义转换规则
  },
  myReducer
);

逻辑说明： #

• inbound函数会在数据即将被持久化时触发，我们在这里只保留需要的mode字段，过滤掉其他不需要持久化的内容，确保存储的数据最小化。
• outbound函数会在从存储中恢复数据时触发，我们将存储的mode值合并回原始state结构中，保证其他未被持久化的字段依然保持原有状态，不会被覆盖或丢失。

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