主页 / coding / 问题 / 78749357
Accepted
scrscr87
Asked: 2024-07-15 18:31:58 +0800 CST

Redux Persist - 创建过滤器

  • 772

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

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

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

1 个回答

  1. Best Answer

    很高兴见到你！我知道你对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、 ） 。timeZoneuser
    3. 出站状态：这只是返回重新水化时的状态。
    4. 白名单：我们在白名单中指定userreducer，以便此转换仅应用于它。

    有关使用创建转换的更多详细信息redux-persist，您可以查看官方文档。

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

    • 1

相关问题