在现代化的 Web 应用中，客户端数据存储是一个非常重要的问题。使用 Redux 管理应用程序的状态是前端开发中的一种流行模式，Redux-persist 是一个用于持久化存储 Redux 状态的工具。
Redux-persist 简介
Redux-persist 是一个用于在应用程序关闭或刷新时将 Redux 状态存储到持久存储中，并在下次应用程序启动时从该存储中恢复 Redux 状态的工具。它在大多数现代化浏览器和移动设备上可用，并支持各种主流的存储引擎，如 LocalStorage、SessionStorage 和 IndexedDB。
Redux-persist 通过提供一个中间件来实现。该中间件在每次发送一个 Redux Action 时都会检查存储引擎中是否有新的状态需要存储。如果有，则将新状态写入存储引擎中。
Redux-persist 安装
要使用 Redux-persist，请先确保你的项目中已安装 Redux。然后，在控制台中输入以下命令安装 Redux-persist：
npm install redux-persist
或者，如果你使用 Yarn，请使用以下命令：
yarn add redux-persist
Redux-persist 配置
Redux-persist 的配置是非常简单的。我们只需要在项目中创建一个“persist 容器”，并将其存储引擎设置为我们想使用的存储引擎。
在项目源代码中，使用以下代码创建 Redux-persist 容器：
-- -------------------- ---- ------- ------ - ------------ - ---- --------------- ------ ------- ---- --------------------------- ----- ------------- - - ---- ------- -------- - ----- ---------------- - ----------------------------- ------------ ------ ----- ----- - ---------------- -------- ----------------- ----------- --- --- ---- -- ------ ----- --------- - -------------------
在这里，我们使用了 redux-persist 的 persistStore 函数来创建一个持久化存储容器。persistStore 函数需要一个 Redux store 作为参数，并将添加一个 Redux 中间件来处理持久化存储。
Storage 对象是 Redux-persist 的核心概念之一，我们使用 storage 对象来指定我们希望使用哪种类型的持久化存储方式。在上面的代码示例中，我们使用了 redux-persist/lib/storage 中的默认 LocalStorage 存储引擎。
在这个例子中，我们还定义了一个 persistConfig 对象，其中：
key属性是我们要持久化的 Redux 状态对象的键名。storage属性是存储配置，指定要使用的存储引擎。
最后，我们将 persistStore 和 persistReducer 函数与 Redux store 集成，这样就能让 Redux-persist 的中间件在每次 Redux action 中自动处理存储操作。
Redux-persist 示例
下面是一个简单的 Redux-persist 示例，它演示了如何在应用程序中使用 Redux-persist 进行持久化存储。我们将编写一个 todo 应用程序，其中包含一个添加任务的表单和一个任务列表。
创建 Redux store
首先，让我们创建 Redux store：
-- -------------------- ---- ------- ------ - -------------- - ---- ------------------ ------ - --------------- ------------ - ---- --------------- ------ ------- ---- --------------------------- ------ - --------------- - ---- ------- ------ ------------ ---- ----------------------------- ----- ----------- - ----------------- ------ ------------- -- ----- ------------- - - ---- ------- -------- - ----- ---------------- - ----------------------------- ------------ ------ ----- ----- - ---------------- -------- ----------------- ----------- --- --- ---- -- ------ ----- --------- - -------------------
创建完成之后，在项目中正常使用 Redux。
创建数据模型
我们需要一个包含任务标题和布尔值的任务数据模型。我们可以使用 Redux 工具包来定义：
-- -------------------- ---- -------
------ - ----------- - ---- ------------------
------ ----- ------------ - --
----- ---------- - -------------
----- --------
-------------
--------- -
-------- ------- ------- -- -
------------
------ ---------------
---------- ------
--
--
--
--
------ ----- - ------- - - ------------------
------ ------- ------------------创建列表和表单
我们在 创建数据模型 中定义了一个 addTodo 假动作，接下来让我们在我们的组件中使用它：
-- -------------------- ---- -------
------ ------ - -------- - ---- -------
------ - ------------ ----------- - ---- -------------
------ - ------- - ---- --------------
------ -------- ---------- -
----- ----- - ------------------- -- ------------
----- -------- - -------------
----- --------- ----------- - ------------
----- ------------ - ------- -- ------------------------------
----- ------------ - ------- -- -
----------------------
--------------------------
--------------
-
------ -
-----
-------- ---------
----- ------------------------
------ ----------- --------------- ----------------------- --
------- ----------------- -------------
-------
----
----------------- -- -
--- -----------------
------ --------------- ------------------------ --
------------
-----
---
-----
------
-
-该组件依赖于 useState、useDispatch 和 useSelector 这三个钩子。当表单提交时，它使用 useDispatch 来分派一个 addTodo 假动作。任务对象的标题设置为用户在输入框内输入的文本。提交表单后，清空输入框。
此时我们打开浏览器，你会看到在输入框输入的任务被添加到列表中后，关闭浏览器，再次打开浏览器，我们发现之前添加的任务仍在列表中。
总结
使用 Redux-persist 可以帮助开发者在应用程序关闭或刷新时将 Redux 状态存储到持久存储中，并在下次应用程序启动时从该存储中恢复 Redux 状态的工具。使用 Redux-persist 配置也非常简单，通过提供一个包含存储引擎和特定键的配置对象来完成配置。在大多数浏览器和移动设备上都可用，并支持多种存储引擎，如 LocalStorage、SessionStorage 和 IndexedDB。在此，我建议开发者在开发现代化 Web 应用时应尽量使用此种存储的方式以避免应用程序数据丢失。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6535e2ad7d4982a6ebd96d54