如何从最终用户的机器上删除持久的 redux 状态

Question

我正在使用 redux-persist 来保存 redux 状态，效果很好。然而，有时我会遇到问题，因为这种持久性的工作方式，即通过客户端的本地存储。

更具体地说，假设用户与我的应用程序进行交互，在我存储并保留在 redux 存储中的网站上进行了一些选择。后来，我发现应用程序中有一个错误，并且用户之前持久化的状态包含这个错误，或者可能根本不包含它，这并不重要。现在，我想为用户“删除”这个持久状态，然后重新开始。

请注意，我说的是数千名用户。我希望他们在新打开应用程序或刷新页面时重新开始。但问题是，由于状态存储在本地存储中，它会自动加载到 redux 存储中。我一直试图解决这个问题的唯一方法是要求用户清除浏览器的缓存（以摆脱本地存储内容），但显然这是解决问题的糟糕方法。

现在，我的问题是如何以编程方式构造代码或执行任何操作以便能够“远程”删除某些用户的本地存储？请记住，我不想为那些没有遇到问题的人删除本地存储，因此放置全局

localStorage.removeItem("key")

不是一个选择。

也许我想要实现的目标甚至是不可能的，因为这就是 redux-persist 的工作原理和故事的结局？

Answer 1

最简单的方法是重命名持久配置的“key”属性（它只是存储字段的名称，它不会影响您的reducer）。例如 - 你有一个带有持久配置的模块，例如

persistReducer({ key: "my-module", ...rest });

你可以将其更改为

persistReducer({ key: "my-module-v2", ...rest });

另一个选择是使用 redux-persist 中的“transform” - 它允许您从存储中转换 props（但仅限内部字段，而不是完整模块），或者您可以自己实现存储（这比您可以更容易）想想） - 它就像一个中间件，你可以过滤任何你想要的东西

Answer 2

您可能正在寻找

redux-persist

的 迁移 流程。基本要点是您对持久状态进行版本控制并编写一个可迁移的函数，例如升级，将存储的状态从一个版本升级到下一版本，并应用持久状态版本之间的差异。换句话说，您将一个版本映射到下一个版本。

示例：

版本-1状态

{
  counter: {
    count: 0,
    badState: "The bad state",
  }
}

const migrations = {
  // Remove replace state.counter.badState with state.counter.goodState
  // Add state.cart
  0: (state) => {
    const newState = {
      ...state,
      counter: {
        ...state.counter,
        goodState: "This is new good state"
      },
      cart: [],
    };
    delete newState.counter.badState;
    return newState;
  }
};

const rootPersistConfig = {
  key: "root",
  version: 0,
  storage,
  migrate: createMigrate(migrations, { debug: false })
};

版本 0 状态

{
  counter: {
    count: 0,
    goodState: "This is new good state",
  },
  cart: []
}

每次状态更改时，您都会为该版本编写一个新的迁移函数。