在前端开发中，我们常常需要在不同的页面之间共享状态数据，比如用户登录信息、主题设置等等。为了避免重复发送请求，我们需要将这些数据持久化存储到本地。而redux-persistate就是一个为Redux状态树提供持久化的解决方案，下面将详细介绍npm包redux-persistate的使用方法。
安装
在项目中使用redux-persistate，首先需要使用npm进行安装。打开终端并输入以下命令：
npm i redux-persistate
配置
持久化 store 的配置
-- -------------------- ---- -------
------ - ----------- - ---- --------
------ - ------------- -------------- - ---- ----------------
------ ------- ---- ----------------------------
----- ----------- - ------- ------- -- -
------ ------------- -
---- -----------
------ - --------- ----- -------------- --
--------
------ ------
-
--
----- ------------- - -
---- -------
-------
--
----- ---------------- - ----------------------------- -------------
--- ----- - ------------------------------
--- --------- - --------------------
------ - ------ --------- --redux-persist 是通过对react的 setState 函数进行增强来实现对store进行持久化，对store进行增强需要引入 redux-persist 中的 persistReducer 函数。
persistReducer 函数接收两个参数，一个是配置信息，一个是 rootReducer 函数。
配置信息中，key属性表示持久化的键名，多个reducer持久化，则需要标明不同的键名，以便区分。
storage 属性表示使用哪种存储方式。
反持久化 store 的配置
反持久化store实际就是获取本地存储里的数据，然后结合reducer生成store：
-- -------------------- ---- -------
------ - ----------- - ---- --------
------ - ------------- -------------- - ---- ----------------
------ ------- ---- ----------------------------
----- ----------- - ------- ------- -- -
------ ------------- -
---- -----------
------ - --------- ----- -------------- --
--------
------ ------
-
--
----- ------------- - -
---- -------
-------
--
----- ---------------- - ----------------------------- -------------
--- ----- - ------------------------------
--- --------- - --------------------
------ - ------ --------- --持久化白名单&黑名单
有时我们会在store 中存储过多的数据信息，没有必要每个状态都需要做持久化，特定状态不做持久化，使用redux-persist 的封装的黑白名单配置即可实现。
-- -------------------- ---- -------
------ - ----------- - ---- --------
------ - ------------- -------------- - ---- ----------------
------ ------- ---- ----------------------------
----- ----------- - ------- ------- -- -
------ ------------- -
---- -----------
------ - --------- ----- -------------- --
---- ------------
------ - --------- ------ -------------- --
--------
------ ------
-
--
----- ------------- - -
---- -------
--------
---------- ---------
--
----- ---------------- - ----------------------------- -------------
--- ----- - ------------------------------
--- --------- - --------------------
------ - ------ --------- --示例
-- -------------------- ---- -------
------ - ------------ ----------- - ---- --------------
------ - ------- - ---- -------------------
----- --- - -- -- -
----- ---- - ------------------- -- ------------
----- -------- - --------------
----- ------------ - ------- -- -
--------------------------------------
--
------ -
--
--------------------
------ ----------- ------------ ----------------------- --
---
--
--
------ ------- ----结语
以上就是redux-persistate的使用教程，使用redux-persistate可以方便地解决状态持久化问题，避免重复请求数据，提高应用程序的性能。同时，本文还分享了关于白名单&黑名单的配置方法，希望能对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700de361a36e0bce8cc6