如果你是一位前端开发者，你一定对使用Redux来管理状态非常熟悉。Redux是一种流行的状态管理库，但是在浏览器刷新或页面重载时，Redux存储的状态将被清空。这里就可以使用一个npm包 @charliehess/redux-persist来处理这个问题。
什么是 @charliehess/redux-persist
@charliehess/redux-persist是一种Redux的持久化存储方案，可以让你存储你的应用程序状态，以便在浏览器刷新时不会丢失状态。
安装
在使用该npm包前，首先需要安装它。
在命令行中输入以下命令：
npm install @charliehess/redux-persist
使用步骤
1. 创建Redux store
在使用@charliehess/redux-persist的过程中，需要对Redux store进行修改。我们需要先创建Redux store，并将其传递给@charliehess/redux-persist以进行状态持久化。
-- -------------------- ---- ------- ------ - ----------- - ---- -------- ------ - ------------- -------------- - ---- ----------------------------- ------ ------- ---- ---------------------------- ------ ----------- ---- ------------- ----- ------------- - - ---- ------- ------- - ----- ---------------- - ----------------------------- ------------- ------ ----- ----- - ------------ ---------------- -- ------ ----- --------- - --------------------
在上面的示例中，我们使用了persistReducer函数将我们的rootReducer转换为经过持久化的reducer。我们还使用了redux-persist提供的storage以存储数据。通过在创建store时，我们将persistedReducer传递给store即可。
2. 嵌套应用程序
如果你的Redux store嵌套在一个应用程序之中，你需要将@charliehess/redux-persist的PersistGate组件嵌套在你的应用程序组件中以确保状态成功持久化。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ - ----------- - ---- ----------------------------------------------
------ --- ---- --------
------ - ------ --------- - ---- ----------
----------------
--------- --------------
------------ -------------- ----------------------
---- --
--------------
------------
-------------------------------
--在上面的示例中，我们将PersistGate组件嵌套在Provider组件中。PersistGate组件接受两个属性：loading和persistor。loading属性接受一个组件用于展示加载状态，我们在这里设置为null。persistor属性接受我们之前导出的persistor。
3. 配置持久化
最后，我们需要告诉@charliehess/redux-persist要在我们的应用程序中哪些状态是需要被持久化的。我们添加persistConfig配置对象来配置我们的持久化。在persistConfig中，我们需要传递key和Blacklist/Whitelist。
-- -------------------- ---- ------- ------ - --------------- - ---- -------- ------ - -------------- - ---- ----------------------------- ------ ------- ---- ---------------------------- ------ - ------------ ------------ - ---- ------------- ----- ------------- - - ---- ------- -------- ---------- -------- - ----- ----------- - ----------------- ----- ------------ ------ ------------ --- ------ ------- ----------------------------- -------------
在上面的示例中，我们在persistConfig中添加了blacklist对象，告诉redux-persist不要持久化user reducer的状态。如果我们要持久化特定的状态，可以使用whitelist。
深度解析
现在我们已经知道如何使用@charliehess/redux-persist持久化redux store。但是，我们需要更深入地理解它，以便我们可以更好地使用和调试它。redux-persist的基本工作原理是将我们的Redux store中的状态序列化为JSON字符串，并将其保存在localStorage中。每次页面重新加载时，redux-persist会检索存储在localStorage中的任何持久化的状态，并将其反序列化为一个JavaScript对象，以便再次将其存储在我们的Redux store中。
持久化的位置
默认情况下，redux-persist将持久化数据存储在localStorage中。但是，有多个存储引擎可用，包括AsyncStorage（React Native）和缓存插件等。
如果你想更改存储引擎来存储状态或更改默认的本地存储键，请参阅@charliehess/redux-persist文档。
Blacklist和Whitelist
在redux-persist的配置中，我们使用黑名单和白名单来确定哪些状态变量将被持久化，哪些不会。
使用黑名单，我们可以告诉redux-persist不要持久化某些状态变量。相反，使用白名单，我们可以明确告诉redux-persist只要持久化某些特定的状态变量，而不是进行全局持久化。
加密数据
默认情况下，redux-persist不会对存储的状态数据进行加密。但是在某些情况下，可能需要在存储状态之前对其进行加密。
在redux-persist的配置中，我们可以提供一个transformers选项列表，并将所有我们希望在存储状态之前应用的转换器添加到该列表中。可以使用的转换器包括加密和解密转换器。
总结
使用@charliehess/redux-persist，我们可以轻松地将我们的Redux store中的状态持久化，以便在浏览器刷新后恢复其状态。我们可以通过添加whitelist或blacklist进行状态持久化和过滤，也可以使用transformers对数据进行加密。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ab281e8991b448d848a