在前端开发中，很多时候需要在浏览器中存储一些数据，比如用户登录状态、购物车信息等。而在 React 应用中，我们通常会使用 Redux 来管理应用状态。但是，当用户刷新页面或关闭浏览器时，Redux 状态会重新初始化，导致之前存储的数据丢失。这时候，就需要使用一个持久化方案来解决这个问题。
persist-reducer 就是一个可以将 Redux 状态持久化到浏览器中的 npm 包。本文将详细介绍如何使用 persist-reducer，并给出一些示例代码。
安装
使用 npm 或者 yarn 安装 persist-reducer：
npm install persist-reducer # or yarn add persist-reducer
同时，你还需要安装 redux-persist：
npm install redux-persist # or yarn add redux-persist
使用
首先，在 Redux 的 Store 中使用 redux-persist 来创建一个 PersistGate：
-- -------------------- ---- -------
------ - ----------- - ---- -------
------ - ------------- -------------- - ---- ---------------
------ ------- ---- --------------------------- -- -------- -- ------------ --- ---
------ - ----------- - ---- ---------------------------------
------ ----------- ---- ------------
----- ------------- - -
---- -------
--------
-
----- ---------------- - ----------------------------- ------------
------ ----- ----- - -----------------------------
------ ----- --------- - -------------------
------ ----- --- - -- -- -
------ -
--------- --------------
------------ -------------- ----------------------
------ --
--------------
-----------
-
-在以上代码中，我们使用 persistReducer 把 rootReducer 包装起来，然后使用 redux-persist 的 persistStore 方法创建一个可持久化存储的 store，并将其传入 PersistGate 中。这里的 key 用来存储状态的键值，默认为 root。同时，我们使用了一个名为 storage 的配置，它指定了使用哪种本地存储方案。这里我们使用的是 Web 中默认的 localStorage。
接下来，我们在 reducer 中使用 persistReducer：
-- -------------------- ---- -------
------ - -------------- - ---- ---------------
------ ------- ---- ---------------------------
----- ------------- - -
---- -------
--------
-
----- ----------- - ------- ------- -- -
------ ------------- -
-- ---------- ----
-
-
------ ------- ----------------------------- ------------在上面的代码中，我们为 cart 创造了一个独立的 persistConfig，这样，cart 中的状态就可以独立于其他 state 进行存储与恢复。
这样，redux 就会将每次 dispatch 的 action 和 state 存储到 localStorage 中，以便下次使用时恢复。
示例
下面是一个购物车示例：
-- -------------------- ---- -------
------ - ------------- ------------- - ---- ------------------
------ - -------------- - ---- ---------------
------ ------- ---- ---------------------------
------ ----- --------- - ---------------------------
------ ----- -------------- - --------------------------------
----- ------------- - -
---- -------
--------
-
----- ----------- - ----------------- ------- -- -
-------
------------------- ------- ------- -- -
----- - --------- - - --------------
----- ------- - ------------ -- ---- --- ----------
-- --------- -
---------------- -- -
- ---- -
------------ --- ---------- --------- - --
-
--
------------------------ ------- ------- -- -
----- - --------- - - --------------
----- ------------ - ----------------- -- ---- --- ----------
-- ------------- --- --- -
-------------------------- --
-
--
--
------ ------- ----------------------------- ------------在以上代码中，我们使用了 Redux Toolkit 提供的 createAction 和 createReducer 来创建了 addToCart 和 removeFromCart 两个 action，以及 cartReducer 的初始状态。然后，我们为 cartReducer 创建了一个独立的 persistConfig。这样，我们就可以将购物车状态独立于其他状态进行存储与恢复。
总结
在本文中，我们介绍了如何使用 persist-reducer 将 Redux 状态持久化到浏览器中。我们首先需要使用 redux-persist 创建一个可持久化存储的 Store，并在 reducer 中使用 persistReducer 为需要持久化的 state 开启持久化功能，并指定其独立的 persistConfig。接着，我们结合一个购物车示例来进一步说明 persist-reducer 的实际用法。
希望本文对大家能够有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005681781e8991b448e43af