在前端开发中，状态管理是一个不可避免的问题。Redux 是一个流行的状态管理工具，在项目中广泛使用。但是，Redux 默认情况下，对于应用程序状态的持久化存储并不是很友好。在本文中，我们将介绍 Redux Persist，这是一个简便的解决方案，它使得将 Redux 的状态进行持久化成为一件容易的事。
什么是 Redux Persisit？
Redux Persist 是一个插件库，它允许我们将 Redux 的状态进行持久化。在应用程序中，我们通常需要将用户的设置、历史记录、购物车信息等在用户重启应用程序时保存下来。Redux Persist 使我们不需要在存储状态时手动处理所有这些数据。它可以以多种格式存储数据，如本地存储、Async Storage（React Native）和 IndexedDB 等。
除了处理数据存储之外，Redux Persist 还可以使用不同的配置选项更灵活地与 Redux 集成。它提供了一个高阶组件（HOC），以便连接我们的 Redux 存储和 Redux Persist。
如何使用 Redux Persist
为了使用 Redux Persist，我们需要在我们的项目中安装 Redux Persist。在项目目录下，使用以下命令：
npm install redux-persist
Redux Persist 提供了一个名为 persistStore() 的函数来存储 Redux 应用程序状态。
-- -------------------- ---- -------
------ - ----------- - ---- --------
------ - ------------- -------------- - ---- ----------------
------ ------- ---- ---------------------------- -- --------
----- ------------- - -
---- -------
--------
--
----- ----------- - ------ - --- ------- -- -
------ ------------- -
---- ------
------ - ------ ----------- - - --
---- ------
------ - ------ ----------- - - --
--------
------ ------
-
--
----- ---------------- - ----------------------------- -------------
----- ----- - ------------------------------
----- --------- - --------------------
------ - ------ --------- --在上述示例代码中，我们为 persistSore() 函数提供了一个 Redux 存储对象，它是一个与应用程序状态同步的状态。persistStore 将存储在本地存储中的状态存储到 Redux 存储中。
使用 persistReducer() 函数可以将我们的 rootReducer 更新为包装了存储和加密选项的新 reducer，以提供存储支持。通过 key 选项，可以指定我们任何时候在存储中存储的对象。
为了将 Redux 存储与我们的应用程序连接起来，我们需要使用 PersistGate。
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- --------------
------ - ----------- - ---- ----------------------------------
------ - ------ --------- - ---- ----------
----- --- - -- -- -
------ -
--------- --------------
------------ ----------------------
--- --- ---
--------------
-----------
--
--当我们在创建应用时使用 PersistGate 把 Provider 组件包裹起来，它将在其内部等待存储完成之后再渲染根组件。
Redux Persist 示例
这里是一个完整的 Redux Persist 示例：
-- -------------------- ---- -------
------ - ----------- - ---- --------
------ - ------------- -------------- - ---- ----------------
------ ------- ---- ----------------------------
------ - -------- - ---- --------------
------ - ----------- - ---- ----------------------------------
------ ------ - --------- - ---- --------
------ - ----- ----- ------ - ---- ---------------
----- ------------- - -
---- -------
--------
--
----- ----------- - ------ - - ------ - -- ------- -- -
------ ------------- -
---- ------
------ - ------ ----------- - - --
---- ------
------ - ------ ----------- - - --
--------
------ ------
-
--
----- ---------------- - ----------------------------- -------------
----- ----- - ------------------------------
----- --------- - --------------------
----- --- ------- --------- -
------------------ -
-------------
-------- - --------------------
-------- - --------------------
-
----- -
-----------------
-
----- -
-----------------
-
-------- -
------ -
----- -------- ----- -- --------------- --------- ----------- -------- ---
----- -------- --------- -- -----------------
----- -------- --------- -- ----------------------------
------- --------- ------------------ --
------- --------- ------------------ --
-------
--
-
-
----- --------------- - ------- -- -
------ -
------ ------------
--
--
----- ------------------ - ---------- -- -
------ -
---- -- -- ---------- ----- ----- ---
---- -- -- ---------- ----- ----- ---
--
--
----- ------------ - ------------------------ -------------------------
----- ---- - -- -- -
------ -
--------- --------------
------------ ----------------------
------------- --
--------------
-----------
--
--
------ ------- -----在上述示例中，我们创建了一个计数器的应用程序，用户可以通过按一个按钮来增加或减少数字。我们将处理 INC 和 DEC 两种类型的动作。
在 rootReducer 中，我们定义了最初的状态，并应用了对应的类型。
在连接 store 和 reducer 之后，我们使用 Provider 在整个应用程序中提供 store 对象。使用 PersistGate 来包裹我们的根组件，它稍等一下，直到加载时存储在本地的本地存储中读回状态。然后使用 connect() 函数将 mapDispatchToProps 和 mapStateToProps 将应用程序的状态和所需的处理程序提供给根组件。
结论
Redux Persist 使得 Redux 应用程序状态持久化成为了一件轻松的事情。它强大又易于使用。在我们的应用程序中，用户可以轻松地完成用户设置、购物车信息、应用程序的访问历史等的持久化存储。Redux Persist 的使用，使得我们可以集中精力于 React 组件和 Redux 状态等部分的开发，而不必担心状态持久化和读取。
如果您有兴趣深入学习 Redux Persist，以下是源代码仓库地址：
https://github.com/rt2zz/redux-persist
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674d1867a336082f2548ad0f