redux-persist-middleware 是一个 Redux 中间件，用于自动化数据持久化，让数据在应用程序关闭后依然存在。这篇文章将介绍 redux-persist-middleware 的使用方法，包括安装、配置和实际例子。
安装
redux-persist-middleware 可以通过 npm 安装：
--- ------- ------ ------------------------
配置
使用 redux-persist-middleware 需要在 Redux store 上配置 middleware。 它需要一个 storage 对象来处理本地存储。可以使用 Redux-persist 或 localForage 等第三方存储库，也可以使用其他自己编写的存储库。 这里我们使用 localStorage 作为存储对象，并将使用自己编写的封装函数将它注入到 storageParam 中。
------ - ------------ --------------- - ---- -------- ------ ----------------- ---- --------------------------- ------ - -------------- - ---- ---------------- ------ ------------ ---- ----------------------- ----- ------------- - - ---- ------- -------- ------------- -- ----- ---------- - ----- --------------------------------------------- ----- ---------------- - ----------------------------- ------------- ----- ----- - ----------------------------- ------------
现在 Redux store 就配置好了，接下来我们可以通过 store.getState() 获取持久化的数据了。
用法
redux-persist-middleware 提供三种类型的存储方式：同步、异步和批处理。
同步
在同步模式下，redux-persist-middleware 在将 action 提交到 reducer 之前将 state 写入本地存储。这样可以确保在 action 处理之前，state 的值已经持久化至本地存储中。
------ - ------------ - ---- ----------------
------ ----- ------- - -------------------------
------ ----- ---------- - ------ -- -
------ ---------- -- -
------------------------
--
--异步
在异步模式下，redux-persist-middleware 只有在 action 成功处理后才将 state 写入本地存储。通过使用异步行为，我们可以确保只有在异步操作完成后才将值保存到本地存储中。
------ - ------------ - ---- ----------------
------ ----- ------- - -------------------------
------ ----- ---------- - ------ -- -
------ ---------- --------- -- -
------ ------------------------------------ -
------- -------
----- ---------------- ---- ---
--
-------- -- -
------------------------
-- -------------------
---------------------
---
--
--批处理
批处理是 redux-persist-middleware 提供的第三种持久化数据的方式，它可用于将多个写入操作打包为一个操作。这样可以减少写入操作的次数，从而提高性能。
------ - ------------ - ---- ----------------
------ ----- ------- - -------------------------
------ ----- ---------- - ------ -- -
------ ---------- -- -
------------------------
-- ------------
---------- ----- -------------- ---
--
--示例
假设我们有一个应用程序，用户可以在表单中输入他们的姓名。我们可以使用 redux-persist-middleware 将用户输入存储到本地存储中。
首先，我们需要添加 redux-persist-middleware 到 Redux store 中，如下所示：
------ - ------------ --------------- - ---- -------- ------ ----------------- ---- --------------------------- ------ - -------------- - ---- ---------------- ------ ------------ ---- ----------------------- ------ ----------- ---- ------------- ----- ------------- - - ---- ------- -------- ------------- -- ----- ---------- - -------------------------------------------------- ----- ---------------- - ----------------------------- ------------- ----- ----- - ----------------------------- ------------ ------ ------- ------
然后，我们在 our Redux store 的 reducer 中增加一个 case:
------ - ------------- - ---- ----------------
------ - ----------- - ---- ------------
----- ------------ - -
----- ---
--
------ ------- ---------------
----------------------- ------- ------- -- -
----- - ---- - - ---------------
------ -
---------
-----
--
--
-- ----------
---------------------- ------- ------- -- -
------ -
---------
------------------
--
--
-- --------------最后，我们在表单组件中使用存储的值，如下所示：
------ ------ - -------- - ---- --------
------ - ------------ ----------- - ---- --------------
------ - ---------- - ---- ------------
----- --- - -- -- -
----- -------- - --------------
----- ------------ -------------- - -------------
----- - ---- - - ------------------- -- -------
----- ------------ - ------- -- -
-----------------------
---------------------------------
------------------
--
----- ----------------- - ------- -- -
----------------------------------
--
------ -
---- ----------------
----- ------------------------
------ ----------- ------------------ ---------------------------- --
------- ---------------------------
-------
-----------------
------
--
--
------ ------- ----这是一个简单的例子，当你关掉浏览器，重新打开这个应用程序的时候，用户的姓名会自动出现在表单中。
结论
本文介绍了如何使用 redux-persist-middleware 实现 Redux 状态的持久化。通过使用本地存储，我们可以自动保存状态，并在应用程序关闭后随时恢复。此外，本文还演示了如何添加修改新的异步行为和使用批处理操作，以提高应用程序的性能。使用 redux-persist-middleware ，使开发人员可以在构建用户友好的应用程序时更轻松地管理 Redux 状态。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6006700de361a36e0bce8cae