如何在 redux-persist-transform-filter 中返回某些字段的初始值

Question

我使用 redux-persist-transform-filter 因为我不需要存储到本地存储 正在加载指示器，但是当我将其添加到黑名单时，我得到的是未定义而不是初始值。 怎么解决这个问题？

const saveSubsetBlacklistFilter = createBlacklistFilter(
    'setupTable',
    ['isDataLoading']
);


const persistConfig = {
  key: 'root',
  storage: storage,
  whitelist: ['setupTable'],
  transforms: [loadSubsetFilter]
};

isDataLoading 具有 true 作为初始值，并且它允许在页面首次加载时显示微调器，但使用黑名单时我会得到未定义。

Answer 1

您需要使用

autoMergeLevel2

状态协调器。

状态协调器定义传入状态如何与初始状态合并。

见下面的例子：

例如

store.ts

：

import { persistReducer, persistStore } from 'redux-persist';
import { createBlacklistFilter } from 'redux-persist-transform-filter';
import { combineReducers, createStore } from 'redux';
import storage from 'redux-persist/lib/storage';
import autoMergeLevel2 from 'redux-persist/lib/stateReconciler/autoMergeLevel2';

const rootReducer = combineReducers({
  setupTable: (state = { isDataLoading: true, data: [] }) => state,
});

const saveSubsetBlacklistFilter = createBlacklistFilter('setupTable', [
  'isDataLoading',
]);

const persistConfig = {
  key: 'root',
  version: 1,
  storage,
  whitelist: ['setupTable'],
  transforms: [saveSubsetBlacklistFilter],
  debug: true,
  stateReconciler: autoMergeLevel2,
};

const persistedReducer = persistReducer(persistConfig, rootReducer as any);

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

存储中持久保存的状态是：

{
  "setupTable": "{\"data\":[]}",
  "_persist": "{\"version\":1,\"rehydrated\":true}"
}

当 redux-persist 将 persisted 状态重新水化为 redux 状态时，

传入状态：

{ setupTable: {data: []}}

初始状态：

{ setupTable: { isDataLoading: true, data: [] } }

调和状态：

{ setupTable: { isDataLoading: true, data: [] } }

注意：初始

setupTable

和传入的

setupTable

是浅层合并的