如何在 React 应用程序中跨页面重新加载保持 Redux Toolkit 状态？

Question

“我在 React 应用程序中使用 Redux Toolkit 来管理全局状态。一切正常，直到我刷新或重新加载页面，此时 Redux 存储状态将重置为其初始状态。我知道这是默认设置行为，但我需要在页面重新加载时保留 Redux 状态的某些部分如何解决这个问题？？？

我想要刷新页面后的值

Answer 1

要在页面重新加载时保存 Redux 状态，请使用

redux-persist

。方法如下：

1. 安装

   redux-persist

   。
2. 用

   persistReducer

   包裹您的减速器。
3. 使用

   persistStore

   创建商店。
4. 在 React 应用程序中使用

   PersistGate

   来保持状态。

这样，您的状态将保存在本地存储中，并在刷新页面时恢复。

Answer 2

默认情况下，redux 在页面加载时自动重置为初始状态。

为了在刷新时保留数据，我们需要将其存储在存储 API 中。

例如，我们可以通过使用本地存储或者类似的东西来手动实现这个机制。

我们还可以使用第三个包来自动化此操作，例如https://www.npmjs.com/package/redux-persist。这将为我们配置这个，我们可以使用白名单/黑名单

来控制保留或删除哪些键