随着前端技术的不断发展，现在的前端开发已经不是像以前那样简单的页面渲染，而是更注重数据的管理与状态的维护。为了更好的管理和维护状态，Redux 应运而生。Redux 是一个在 JavaScript 应用中的可预测状态容器。但是，使用 Redux 时我们还需要解决数据的持久化问题，想要客户端的状态能够在刷新页面后能够得到保存。这时候就可以用到 redux-simple-localstorage 这个 npm 包。
在本篇文章中，我们将会讲述如何使用 redux-simple-localstorage，包含它的详细介绍、如何安装和使用，并写一些示例代码来帮助我们更好的了解它。
什么是 redux-simple-localstorage？
redux-simple-localstorage 是一个封装了 localstorage 的 redux 存储方案，它能够持久化 Redux Store 中的数据到本地存储，以实现在关闭浏览器或重新打开浏览器后，对 Store 数据的无缝恢复。
安装
我们可以使用 npm 包管理器来安装 redux-simple-localstorage，可以在你的项目根目录下运行以下命令：
npm install redux-simple-localstorage --save
如何使用
在安装完成后，我们就可以通过下面的方法来使用 redux-simple-localstorage。
第一步，我们需要使用 redux-simple-localstorage 的 applyMiddleware() 函数来创建 redux 的中间件。
-- -------------------- ---- ------- ------ - ------------ ---------------- --------------- - ---- -------- ------ - ------------- -------------- - ---- ---------------------------- ------ -------- ---- ------------- ----- ------------- - - ---- ------- -- ----- ---------------- - ----------------------------- --------------------------- ------ ----- ----- - ----------------------------- -------------------------------
第二步，创建 persistConfig 对象，它是配置 redux-simple-localstorage 储存的地方。persistConfig 对象的 key 表示我们储存在本地存储中的对象名，通常我们将 redux-store 数据存储在一个名为 'root' 的对象中。
第三步，使用 persistReducer 函数对我们的存储对象做出必要的配置。需要注意，我们在此之前需要将所有的 reducer 合并成一个单一的 reducer。
第四步，在创建 store 的过程中，我们需要调用 redux 的 applyMiddleware 函数，并且将 persistStore 传递给它。这些都可以在上述代码块中的最后一行中完成。
最后，我们需要包装我们的根组件，以便我们的 Store 在所有的子组件中都可以访问到它。通过使用 persistStore 方法，我们能够启动本地存储并且持久化 App 的状态。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ - ----- - ---- ----------
------ - ------------ - ---- ----------------------------
------ --- ---- --------
------------------- --- -- -- -
----------------
--------- --------------
---- --
------------
-------------------------------
--
---为了实现数据的持久化，我们需要在 redux 的 applyMiddleware 函数中传递给 redux-simple-localstorage 中的 persistStore 函数，等待持久化完成后，才可以继续挂载整个应用。
接下来，我们可以在你的 reducer 中使用 persistCombineReducers 函数。
-- -------------------- ---- ------- ------ - ---------------------- - ---- ---------------------------- ----- -------- - - -- ---- ------- -- ----- ------------- - - ---- ------- -------- -- ----- ---------------- - ------------------------------------- ---------- ------ ------- -----------------
以上代码将创建一个 Redux 的 reducers 对象，用 persistConfig 对象将其合并为一个单一的 reducer，最后导出 persistedReducer 。
示例代码
为了全面的理解 redux-simple-localstorage 可以如何帮助我们更好的管理和维护状态，接下来是一个简单的例子：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------ ----------- - ---- --------------
------ - -------- ---------- - ---- ----------
-------- ----- -
----- ----- - ------------------- -- -------------
----- -------- - --------------
-------- ----------- -
-------------------
----- ----- - --------------------
-------------------------
------------------- - ---
-
-------- --------------- -
----------------------------
-
------ -
-----
-------- ---------
----- --------------------
------ ----------- -------- --
--------------------
-------
----
----------------- ------ -- -
--- ------------
------
------- ----------- -- --------------------------------
-----
---
-----
------
--
-
------ ------- ----以上代码中，我们利用了 react-redux 中用于连接 Redux Store 的 useSelector 和 useDispatch 函数，以及之前讲解的 addItem 和 removeItem 方法。前者用来获取 Store 中的状态，后者用来改变 Store 中的状态。运行上述代码，你可以看到在线 Todo List 示例项目。
总结
通过本篇文章，我们从核心概念入手，详细介绍了如何使用 redux-simple-localstorage 包并讲解了示例代码中的每一个细节，希望这篇文章对您有所帮助。redux-simple-localstorage 让我们的前端应用更加完整，更加具有健壮性，避免了因为浏览器刷新而导致的状态丢失，具有深远的指导意义。如果你希望更好地管理和维护状态，redux-simple-localstorage 将成为您不容错过的 npm 包。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067008e361a36e0bce8b5d