redux-persist - 如何将嵌套状态字段列入白名单？答案

【问题标题】：redux-persist - how to whitelist nested state field?redux-persist - 如何将嵌套状态字段列入白名单？
【发布时间】：2020-07-21 07:57:10
【问题描述】：

我想在存储中保存一个完整的减速器，并且只有一个来自其他减速器的字段。我怎样才能做到这一点？我发现例如this gh issue，但所有尝试（来自 gh 链接和其他来源）都失败了。

codesandbox example

const persistConfig = {
  key: "root",
  storage,
  whitelist: ["first"],
  transforms: [createWhitelistFilter("second", ["counter"])]
};

它适用于 first 减速器，当我只想存储减速器的 counter 字段时，第二个没有任何反应。

有什么想法吗？

【问题讨论】：

您好，您要保留第一个和第二个计数器值吗？即刷新时，您需要它们两个都具有已保存的值？
我只想保存特定reducer的一个字段，而不是整个reducer。

标签： reactjs redux redux-persist

【解决方案1】：

了解问题后，我编写了一个自定义转换器来保存第二个减速器的计数器字段。并避免保存整个对象。

我使用了一个自定义转换器来实现该功能。您可以通过here 阅读更多相关信息

解决方案

const whiteList = createTransform(
  (inboundState, key) => {
    if (key === "second") {
      // This is saving to storage
      // Save only the counter field for second reducer
      return inboundState.counter;
    }
    return inboundState;
  },
  (outBoundState, key) => {
    if (key === "second") {
      // Receiving data from storage
      // add the saved counter field in reducer object
      return {
        name: "",
        counter: outBoundState
      };
    }
    return outBoundState;
  }
);

const persistConfig = {
  key: "root",
  storage,
  transforms: [whiteList]
};

我们只允许计数器字段保存在存储中，并在接收时将其添加到对象值中。

这是工作的sandbox。

【讨论】：