redux-persist-transform-filter黑名单字段返回undefined而非初始值如何解决

你遇到的这个问题是redux-persist-transform-filter的默认逻辑导致的：当你把isDataLoading加入黑名单后，持久化存储时这个字段会被完全从setupTable切片中剔除，当从本地存储恢复数据时，redux-persist会直接用剔除了该字段的对象覆盖整个setupTable切片，导致reducer中预设的初始值被覆盖，该字段就变成了undefined。
另外你提供的代码存在一处笔误：你定义的过滤函数名为saveSubsetBlacklistFilter，但persistConfig的transforms数组中传入的是未定义的loadSubsetFilter，需要先修正这个问题保证过滤规则生效。

你可以从以下三种方案中任选一种适配你的项目：

• 方案1：配置自动合并规则，保留初始字段
  引入redux-persist内置的autoMergeLevel2状态合并器，它会自动将恢复的持久化数据和reducer初始值做深层合并，缺失的字段会自动沿用初始值，改造成本最低：

  import { autoMergeLevel2 } from 'redux-persist/lib/stateReconciler/autoMergeLevel2';
  
  const saveSubsetBlacklistFilter = createBlacklistFilter(
      'setupTable',
      ['isDataLoading']
  );
  
  const persistConfig = {
    key: 'root',
    storage: storage,
    whitelist: ['setupTable'],
    transforms: [saveSubsetBlacklistFilter],
    stateReconciler: autoMergeLevel2 // 新增该行配置
  };
  

• 方案2：在reducer中监听REHYDRATE action补全字段
  手动监听redux-persist恢复数据时触发的persist/REHYDRATE action，主动合并初始值和恢复的数据，灵活性最高：

  const initialState = {
    isDataLoading: true,
    // 其他setupTable字段的初始值
  }
  
  const setupTableReducer = (state = initialState, action) => {
    // 持久化数据恢复时补全缺失字段
    if (action.type === 'persist/REHYDRATE' && action.payload?.setupTable) {
      return {
        ...initialState,
        ...action.payload.setupTable
      }
    }
    // 原有reducer业务逻辑
    switch (action.type) {
      // 你的其他业务case
      default: return state
    }
  }
  

• 方案3：同时配置加载阶段的白名单过滤
  新增加载阶段的白名单过滤器，只恢复你需要持久化的字段，剩余字段自动保留初始值：

  import { createBlacklistFilter, createWhitelistFilter } from 'redux-persist-transform-filter';
  
  // 存储时剔除加载状态字段
  const saveFilter = createBlacklistFilter(
    'setupTable',
    ['isDataLoading']
  );
  
  // 加载时只恢复需要持久化的字段
  const loadFilter = createWhitelistFilter(
    'setupTable',
    // 此处填写setupTable中除isDataLoading外需要持久化的所有字段
    ['tableData', 'pagination', 'filterParams']
  );
  
  const persistConfig = {
    key: 'root',
    storage: storage,
    whitelist: ['setupTable'],
    transforms: [saveFilter, loadFilter]
  };
  

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