Redux Persist - 创建过滤器

Question

我是 React Redux 新手。你能告诉我如何手动编写下面的saveUserFilter函数吗？我不想再使用 redux-persist-transform-filter，因为它使用的是 lodash.set，它很容易受到原型污染。

const saveUserFilter = createFilter('user', [
  'username',
  'displayName',
  'timeZone',
])

const persistConfig = {
  key: KEY,
  storage,
  whitelist: [
    'user',
    'timeZones',
  ],
  transforms: [ saveUserFilter ],
}

Answer 1

很高兴见到你！我知道您对

lodash.set

中使用的

redux-persist-transform-filter

的感觉如何，它很容易受到原型污染，特别是在考虑对象分配使用 Object.create() 的情况时。但不用担心，因为有一个简单的方法可以帮助您在保存用户过滤器时使用以下方法摆脱此方法。

首先，我们来定义

saveUserFilter

函数。此函数将手动过滤

user

状态，仅包含您需要的属性：

username

、

displayName

和

timeZone

。

具体操作方法如下：

import { createTransform } from 'redux-persist';

const saveUserFilter = createTransform(
  // Transform state before it's serialized and persisted.
  (inboundState, key) => {
    if (key === 'user') {
      // Only include specific properties in the persisted state.
      const { username, displayName, timeZone } = inboundState;
      return { username, displayName, timeZone };
    }
    return inboundState;
  },
  // Transform state being rehydrated.
  (outboundState, key) => {
    return outboundState;
  },
  // Specify which reducer this transform applies to.
  { whitelist: ['user'] }
);

const persistConfig = {
  key: 'root',
  storage,
  whitelist: ['user', 'timeZones'],
  transforms: [saveUserFilter],
};

export default persistConfig;

说明：

1. 创建变换：我们使用

   redux-persist

   的

   createTransform

   来定义自定义变换。
2. 入站状态：这部分在保存之前过滤状态。我们只保留

   username

   状态所需的属性 (

   displayName

   、

   timeZone

   、

   user

   )。
3. 出站状态：这只是返回补水时的状态。
4. 白名单： 我们在白名单中指定

   user

   减速器，以便此变换仅应用于它。

有关使用

redux-persist

创建转换的更多详细信息，您可以查看官方文档。

如果您有任何其他问题或需要进一步帮助，请随时与我们联系。祝您的项目顺利！