介绍
redux-store-sync 是一个将 Redux Store 与 LocalStorage 同步的 npm 包，它可以在每次状态变化时，自动将 Redux Store 的数据同步到 LocalStorage 中，从而可以在页面刷新或关闭后，重新加载保存的数据。
在前端开发中，我们经常需要将应用的状态存储在本地，以便下次使用时可以快速恢复上一次的状态。这时，redux-store-sync 就是一个非常好的工具。
安装
通过 npm 安装 redux-store-sync：
npm install --save redux-store-sync
使用
1. 创建一个 Redux Store 并添加 redux-store-sync 中间件
-- -------------------- ---- ------- -- ----- ----- --- ------ - ------------ --------------- - ---- -------- ------ - ---------------- - ---- ------------------- ------ ----------- ---- ------------- -- -- ---------------- --- ----- ----- - ------------ ------------ ------------------------------------------ --
在上面的代码中，我们将 syncLocalStorage 中间件添加到 createStore 的第二个参数 applyMiddleware 中。该中间件需要传入一个参数，这个参数是一个用于区分存储的前缀（可以是你应用的名称），它会用于将数据存储在 LocalStorage 中。
2. 创建 Redux Reducer
-- -------------------- ---- -------
-- -- -------
------ - --------------- - ---- --------
------ - ---- - ---- -------------------
----- ------------ - -
--------- ---
--------- ---
--
----- ------------ - ------ - ------------- ------- -- -
------ ------------- -
---- ----- -- --- ---------------- ------ --------------- -----
------ ----------------- ------ ----------------
---- --------
------ ----------------- ------ -
--------- ------------------------
--------- ------------------------
---
--------
------ ------
-
--
----- ----------- - ----------------- ------ ------------ ---
------ ------- ------------在上面的代码中，我们定义了一个示例的 Redux Reducer，其中 SYNC 是 redux-store-sync 中间件派发的 action，这个 action 的 payload 包含了从 LocalStorage 中读取的数据，我们将其与当前的 State 合并，然后返回一个全新的 State。
3. 在页面中使用 Redux
-- -------------------- ---- -------
-- ----
------ ------ - --------- - ---- --------
------ - ------------ ----------- - ---- --------------
----- --------- - -- -- -
----- -------- - --------------
----- -------- - ------------------- -- ----------------------
----- -------- - ------------------- -- ----------------------
------------ -- -
------------------------ ----------
------------------------ ----------
-- ---------- -----------
----- ----------------- - ------- -- -
----- - ----- ----- - - -------------
---------- ----- -------- -------- - ------- ----- - ---
--
------ -
-----
------ ----------- --------------- ---------------- ---------------------------- --
------ --------------- --------------- ---------------- ---------------------------- --
------
--
--在上面的代码中，我们使用了 React 官方提供的 Redux 工具：useSelector 和 useDispatch。通过 useSelector 的方式获取当前的 State 中 login 对象中的 username 和 password，然后通过 useEffect 来监听 State 的变化。在 handleInputChange 函数中，我们通过 useDispatch 来派发一个 LOGIN 的 action，从而更新 State 中的值。
4. 示例
上面的代码可以在这个 CodeSandbox 中进行查看和修改：https://codesandbox.io/s/redux-store-sync-example-0hebe
总结
使用 redux-store-sync 可以方便地将 Redux Store 的数据与 LocalStorage 同步，从而实现应用状态的本地存储。在某些情况下，这个库会大大简化代码的编写，提升开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700ce361a36e0bce8c60