介绍
redux-reducer-localstorage-syncing-middleware 是一个用于同步 Redux store 和 Local Storage 的中间件库。它可以帮助我们在应用程序的不同页面或者重新加载之后，重新恢复 Redux 的 store 数据。
安装
通过 npm 进行安装：
npm install redux-reducer-localstorage-syncing-middleware
使用
添加中间件
添加 middleware 到 Redux store 中：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ - -------------------- - ---- ------------------------------------------------
----- ----------- - --------------------------
----- ----- - ------------
------------
----------------
-- --- --- ----------
--------------------
-
--配置
配置一些必要的参数，比如存储键值和更新间隔时间（默认 1000ms）：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ - -------------------- - ---- ------------------------------------------------
-- ------ --- -------------
----- ------ - -
----------- ---------------
------------- ------ -- --------- ------- -- -------
-
----- ----------- - --------------------------
----- ----- - ------------
------------
----------------
-- --- --- ---------- ---- --- ------ ------
----------------------------
-
--配置 reducer
我们需要在 reducer 中定义哪些 state 需要同步存储在 Local Storage 中。Redux store 中的数据默认不会同步到 Local Storage 中，因此必须手动将它们与 Local Storage 中的数据进行同步。在 reducer 中使用“localifyReducer”高阶 reducer：
-- -------------------- ---- -------
------ - --------------- - ---- ------------------------------------------------
----- ------------ - -
------ ---
------ ---
--
----- ------- - ------ - ------------- ------- -- -
-- --- ---- ---- -- ------ -------
------ ------
--
-- ----------- --- ------- ---- --- ------- --- --- ----- ------ -- ----
------ ------- ------------------------ -
----------- --------------- -- --- ---- -- -- ------------ ------
------- --------- --------- -- --- ----- ------ -- -- ----- -- ----- -------
---示例
下面是一个简单的完整示例：
-- -------------------- ---- -------
------ - ------------ ---------------- --------------- - ---- --------
------ - --------------------- --------------- - ---- ------------------------------------------------
----- ------ - -
----------- ---------------
-
----- ------------ - -
------ ---
------ ---
--
----- ----------- - -----------------
---- ---------------------- - ------------- ------- -- -
------ ------------- -
---- -----------
------ -
---------
------ ---------------- -------------
--
---- -----------
------ -
---------
------ ---------------- -------------
--
--------
------ ------
-
-- -
----------- ------------------
------- --------- ---------
---
---
----- ----- - ------------------------ -----------------------------------------------
-- ----------- ------- -- --- ---- ----
---------------- ----- ----------- ----- - --- -- ----- ---- ----- - ---
---------------- ----- ----------- ----- - --- -- ----- ----- ---- - ---
-- -------- ----- -------
-------------------------------------------------- -- ----------------------------- ------------------------------------- -------
-- ----- --------- --- ----
----- ------------- - ------------------------ -----------------------------------------------
-- -------- --- -------- -----
--------------------------------------
-- -
-- ------ -
-- -------- -
-- -
-- ----- --
-- ------- ---- -----
-- -
-- --
-- -------- -
-- -
-- ----- --
-- ------- ----- ----
-- -
-- -
-- -
-- -在上面的示例代码中，我们首先定义了一个配置对象 config，它包含要求的 key：storageKey，用于指定 Local Storage 中键的名称。然后我们定义一个初始状态 initialState，它包含两个空数组，用于存储 todos 和 users 的状态数据。
接下来，我们创建了一个包含名为 app 的 reducer 的根 reducer，并使用本地化 reducer 对其进行处理。
最后，我们通过添加 syncWithLocalStorage 中间件及时保存数据。
结论
redux-reducer-localstorage-syncing-middleware 可以帮助我们及时同步应用程序的 Redux store 和 Local Storage 中的数据，使数据在应用程序重新加载或刷新之后不会丢失。利用这个中间件库，我们可以更加轻松地进行应用程序的开发，提升用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065b44c6eb7e50355dbe3f