在React应用中，使用Redux进行状态管理非常普遍。然而，仅使用Redux并不能完全解决应用程序中所有的状态管理问题，特别是在数据持久化和本地存储方面。而redux-localstorage是一个非常棒的npm包，可以使Redux状态能够存放到本地存储中，从而解决应用程序的持久化问题。
本文将为读者介绍redux-localstorage的使用方法和相关技术知识，帮助读者在自己的React应用中快速应用Redux状态本地持久化处理。
redux-localstorage 简介
redux-localstorage是一款用于在Redux应用中针对本地存储的中间件。当应用程序使用此中间件时，redux-localstorage将Redux状态保存到本地存储中，从而能够在应用程序中保持状态持久化。redux-localstorage包括两个主要部分:
本地存储。这是redux-localstorage默认使用的浏览器本地存储API。本地存储被设计成在用户关闭浏览器窗口后，将追踪应用程序状态。可以通过设置来关全局的窗口关闭标志，手动使本地存储丢失。
辅助程序。redux-localstorage可以将同步和异步redux actions转化为持久化动作。它还提供了适用于编写你自己的转换器和操作符的API便于拓展。
redux-localstorage 安装
要在你的React应用中使用redux-localstorage，首先需要通过npm install 命令安装该包:
npm install --save redux-localstorage
在Redux中使用 redux-localstorage
首先，我们需要在 Redux 中注册 redux-localstorage 中间件。
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ - --------------- - ---- --------------------
------ ----------- ---- -------------
----- ------------- - ----------------
-- -------------------
----------------
--------- -- ---- ----- ---------- --- ---- -- -------
- ---- ----------- - -- ------ ----- --- ---- ----
-
--
----- ----- - ------------------------ ---------------persistentStore 函数是redux-localstorage的主体，而 ["cart"] 是需要在 Redux 中持续化存储的 states，{key:'cart-data'} 告诉 redux- localstorage 将“cart”存储在本地存储中的 cart-data 键下。并且，需要将 storeEnhancer 设置为 Redux createStore 方法的第二个参数。
代码示例
以一个简单的购物车应用程序为例，给大家展示如何配置Redux及redux-localstorage实现持久化。
首先，让我们定义购物车状态的初始状态作为一个空列表，然后定义两个Redux Action Creator，分别是添加商品到购物车项和从购物车中删除。
-- -------------------- ---- -------
-----------------
------ ----- -------- - ----------
------ ----- ----------- - -------------
------ -------- ------------- -
------ -
----- ---------
----
-
-
------ -------- -------------- -
------ -
----- ------------
--
-
-接下来，我们需要创建一个Redux reducer。我们的购物车reducer将处理ADD_ITEM和DELETE_ITEM两种基本的Redux action。
-- -------------------- ---- -------
------------------
------ - --------- ----------- - ---- -----------------
------ ------- -------- ----------------- - --- ------- -
------ ------------- -
---- ---------
------ ---------- ------------
---- ------------
------ ----------------- -- ------- --- ----------
--------
------ -----
-
-现在我们已经有了我们需要的actions和表单，我们需要将其集成到我们的Redux store中。首先，让我们定义一些中间件将Redux state存储到localStorage中。
-- -------------------- ---- -------
----------------
------ - ------------ --------------- - ---- -------
------ - ---------------- - ---- ------------------------------------------
------ - --------------- - ---- --------------------
------ ----------- ---- -------------
------ ------- -------- ---------------- -
----- ---------- - --
----- -------- - ------------------------------
----- ----- - ------------
------------
---------------------
-----------------------
-
------ -----
-在以上代码片段中，您可以看到 Redux createStore 函数中的 store 增强器 persistentStore('cart')。这告诉Redux store将购物车数据存储在本地存储的键cart下。此外，我们还将使用Redux开发工具套件增强Redux store。
现在，我们可以将我们的购物车中间件添加到Redux store中。
-- -------------------- ---- ------- ---------------- ------ - ------------ --------------- - ---- ------- ------ - ---------------- - ---- ------------------------------------------ ------ - --------------- - ---- -------------------- ------ ----------- ---- ------------- ------ -------------- ---- -------------------- ----- ---------- - ---------------- ----- -------- - ------------------------------ ----- ----- - ------------ ------------ --------------------- ------------------------ -------- - ------ ------- -----
现在，我们已经将cartMiddleware添加到middleware数组中，然后将middleware数组作为第二个参数传递给applyMiddleware函数。我们还将使用Redux devTools增强器增强Redux store。
最后，让我们创建一个简单的界面，来使用我们新创建的 state 值。
-- -------------------- ---- -------
--------------------
------ ----- ---- -------
------ - ------- - ---- -------------
------ - -------- ---------- - ---- -----------------
-------- ----------- -
----- --------- - -- -- -
----- ---- - - --- ----------- ----- ---- ----- -
-------------------
-
----- ------------ - ---- -- -
--------------------
-
------ -
-----
------------ ---------
------- ----------- -- ---------------- -------------
----
-------------------- -- -
--- --------------
------------------------
------- ----------- -- --------------------------------------
-----
---
-----
------
-
-
----- --------------- - ----- -- -- ----- ---------- --
----- ------------------ - - -------- ---------- -
------ ------- --------
----------------
------------------
-------像这样，我们就可以将购物车项目添加到列表中，并从列表中删除项目。
总结
在本文中，我们介绍了如何使用redux-localstorage npm包将Redux状态保存到本地存储中，以便实现数据持久化和本地状态管理。我们展示了如何创建Redux actions, reducers, and middleware来管理一个简单的购物车应用程序。在将Redux state持久化存储到localStorage中之后，这些配置应该被很容易地用于管理其他Redux应用程序状态。
在Redux应用程序中实现本地存储持久化处理，并非是一件简单的事情，但是redux-localstorage通过它所提供的思路，可以使此工作得以简便和快捷地完成。对于使用Redux的开发者和工程师来说，掌握和深入理解 redux-localstorage 的使用方法，将会是一项非常有价值的前端技能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067007e361a36e0bce8a95