使用 Redux 保持状态 在 React 中使用 Redux Toolkit 保持状态

Devinlpass

编者注：本文最后更新于 2023 年 12 月 7 日，其中包含高级持久性技术，例如使用嵌套持久性和转换持久性数据。 使用 Redux 保持状态 在 React 中使用 Redux 工具包保持状态 通过 Redux Persist 库，开发人员可以将 Redux 存储保存在持久存储中，例如本地存储。因此，即使刷新浏览器后，站点状态也将被保留。Redux Persist 还包含允许我们自定义持久化和重新水合状态的方法，所有这些都使用易于理解的 API。 在本文中，我们将学习如何在 React 中将 Redux Persist 与 Redux Toolkit 结合使用



。要阅读本文，您应该熟悉 React 和 Redux Toolkit。您的计算机上还应该安装 Node.js。 为什么要使  加拿大电话号码列表   用 Redux 持久化？ Redux Persist 是一种状态管理工具，允许 Redux 存储中的状态在浏览器和应用程序会话中持久保存，通过在存储中预加载持久数据来改善用户体验。它还提供针对意外崩溃和网络问题的稳健性，防止数据丢失并提供更可靠的用户体验。 Redux Persist 提供了各种配置，包括自定义缓存策略、决定要保留和排除状态的哪些部分以及要使用的存储机制。它还具有内置功能，例如迁移、转换和自定义合并。 离线支持是在移动应用程序中保留 Redux 存储的另一个优势。持久状态允许用户即使在离线状态下也可以与应用程序交互，并且当网络连接恢复时，存储的状态将被重新补充。






尽管没有最近的更新，Redux Persist拥有一个庞大而活跃的社区，拥有优秀的文档和常见问题的现成答案。它还与 Redux Toolkit 配合良好，提供更精简、更有效的状态管理体验。 设置反应 我已经创建了一个使用 Redux Toolkit 进行状态管理的应用程序。我们将在本教程中使用它来了解 Redux Persist 的工作原理。首先，克隆 GitHub 存储库。您可以使用以下命令来执行此操作： $ git clone https://github.com/Tammibriggs/auth-app.git $ cd auth - app $ npm install​ 接下来，我们可以使用命令启动应用程序npm start。在我们的应用程序中，我们将看到一个表单，其中有一个用于输入我们的姓名和电子邮件的字段。输入所需的信息并提交表单后，我们将进入我们的个人资料页面，该页面将类似于下图： 反应简介页面 当我们刷新浏览器时，我们的数据就会丢失。 让我们学习如何使用 Redux Persist 将状态保存在持久存储中，以便即使刷新后数据也保持不变。我们还将学习如何自定义持久保存的内容并指定如何合并传入状态。