在现代前端开发中，状态管理是非常重要的一环。Redux 作为目前最受欢迎的状态管理器之一，得到了广泛的应用。但是，Redux 中的状态是存储在内存中的，当浏览器刷新或者用户关闭网页时，状态将会丢失。为了解决这个问题，我们可以使用 redux-persist-2 这个 npm 包，将 Redux 中的状态保存在本地存储中，实现持久化。
安装
使用 yarn：
yarn add redux-persist-2
或者使用 npm：
npm install redux-persist-2
基本用法
使用 redux-persist-2 首先需要创建一个 persistReducer，传入一个由 Redux 的 combineReducers 返回的根 reducer 和一个配置对象。
-- -------------------- ---- ------- ------ - ----------- - ---- -------- ------ - ------------- -------------- - ---- ------------------ ------ ------- ---- ---------------------------- ----- ----------- - ----------------- -- ---- -------- ---- --- ----- ------------- - - ---- ------- -------- -- ----- ---------------- - ----------------------------- ------------- ----- ----- - ------------------------------ ----- --------- - --------------------
其中，persistConfig 中的 key 属性指定了存储的 key 值，默认为 'root'，同时 storage 属性指定了存储方式，可以使用默认的 localStorage 或者自定义存储方式。
使用 persistStore(store) 函数将 Redux 的 store 和 persistor 关联起来，以便在建立 store 后进行状态的读取和持久化存储。
高级用法
Whitelist 和 Blacklist
可以通过配置 whitelist 或 blacklist 属性实现对指定 reducer 的数据进行存储或排除。例如，只存储 user 和 cart reducer：
const persistConfig = {
key: 'root',
storage,
whitelist: ['user', 'cart'],
};或者排除 session reducer：
const persistConfig = {
key: 'root',
storage,
blacklist: ['session'],
};自定义获取和存储逻辑
redux-persist-2 默认会将所有状态值进行 JSON 序列化后存储，如果想要进行一些较复杂的序列化操作，可以使用自定义的 transformers。例如，我们需要将一个对象的日期类型转换为字符串类型：
-- -------------------- ---- -------
----- --------------------- - -
-- ---------
-- - --------- ----
-------- ------- -- -
-- ------ -- ---------- ---------- ----- -
------ - --------- ----- --------------------- --
-
------ ------
--
--------- ------- -- -
-- ------ -- ----------- -
------ - --------- ----- --- ---------------- --
-
------ ------
--
--
----- ------------- - -
---- -------
--------
-- - ----------- -- -------------
------------- ------------------------
--自定义存储引擎
如果需要使用其他存储引擎，可以实现 redux-persist-2 的 Storage 类型接口。例如，使用 IndexedDB 存储数据：
-- -------------------- ---- -------
------ - ----------- - ---- --------
------ - ------------- -------------- - ---- ------------------
----- ---------------- ---------- ------- -
--- ------------
----- ---------- ------- --------- -------- ------------- -
------ --- ----------------- ------- -- -
----- ------- - -------------------- ---------
--------------- - ------- -- -
------------------------ ------ -- ------ -------
--------------
--
----------------------- - ------- -- -
----- -- - ------------- -- ------------
-- ------ ----------- --- -------
-- ---
--
----------------- - ------- -- -
---------------------- -------- -------
------- - ------------- -- ------------
----------
--
---
-
----- ------------ ------- ------ ----- ------------- -
------ --- ----------------- ------- -- -
----- ----------- - ------------------------------ -------------
----- ----------- - ---------------------------------
----- ------- - ---------------------- -----
--------------- - ------- -- -
------------------------ ----- -------
--------------
--
----------------- - ------- -- -
---------------------- --------- -------
----------
--
---
-
----- ------------ -------- ------------ -
------ --- ----------------- ------- -- -
----- ----------- - ------------------------------ ------------
----- ----------- - ---------------------------------
----- ------- - ---------------------
--------------- - ------- -- -
------------------------ ----- -------
--------------
--
----------------- - ------- -- -
---------------------- --------- -------
--------------------- -- -------------
--
---
-
----- --------------- -------- ------------- -
------ --- ----------------- ------- -- -
----- ----------- - ------------------------------ -------------
----- ----------- - ---------------------------------
----- ------- - ------------------------
--------------- - ------- -- -
------------------------ -------- -------
--------------
--
----------------- - ------- -- -
---------------------- ------------ -------
----------
--
---
-
-
-- -- --------- ----
----- ---------------- - --- -------------------
----- ----------------------------- ---
----- ----------- - -----------------
-- ---- -------- ----
---
----- ------------- - -
---- -------
-------- -----------------
--
----- ---------------- - ----------------------------- -------------
----- ----- - ------------------------------
----- --------- - --------------------示例代码
完整的代码示例可参考以下代码：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ - ------------- -------------- - ---- ------------------
------ ------- ---- ----------------------------
-- -- -----
----- ------------ - -
----- -----
----- ---
-------- -
------ -----
---------- -----
--
--
-- -- ------ -----
----- -------- - -----------
----- ----------- - --------------
----- ----------- - --------------
-- -- -------
------ -------- ------------- -
------ - ----- --------- -------- ---- --
-
------ -------- --------------- -
------ - ----- ------------ -------- ---- --
-
------ -------- ------------------- -
------ - ----- ------------ -------- ------- --
-
-- -- --------
-------- ----------------- - ------------------ ------- -
------ ------------- -
---- ---------
------ ---------------
--------
------ ------
-
-
-------- ----------------- - ------------------ ------- -
------ ------------- -
---- ------------
------ ---------- ----------------
--------
------ ------
-
-
-------- -------------------- - --------------------- ------- -
------ ------------- -
---- ------------
------ ---------------
--------
------ ------
-
-
----- ----------- - -----------------
----- ------------
----- ------------
-------- ---------------
---
-- -------- -------
----- ------------- - -
---- -------
--------
---------- ------------
--
----- ---------------- - ----------------------------- -------------
-- -- ----- - ---------
----- ----- - ------------------------------
----- --------- - --------------------
-- -- ----- - -------
------------------------ ----- ------- ----
-------------------------- --- -- ----- ----- -- ----
--------------------------- ------ --------- ---------- ------------ ----
--------------------- ------------------
-- ---
-- ------ -
-- ----- - ----- ------- --
-- ----- - - --- -- ----- ----- -- - --
-- -------- - ------ --------- ---------- ------------ -
-- -以上就是 redux-persist-2 的使用教程和示例代码，希望对你的学习和实践有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700de361a36e0bce8c97