简介
Simple-Redux-Persist 是一个基于 Redux 状态管理库的 NPM 包，提供持久化存储 Redux 状态的功能，方便管理前端应用的状态数据。
该包通过将 Redux 状态存储在本地存储、Cookie、SessionStorage等永久性储存空间，实现了在页面刷新后仍能保留上一次状态的功能。同时，Simple-Redux-Persist 还支持对定义的部分状态进行存储，避免不必要的性能开销。
安装
使用 NPM 进行安装：
npm install simple-redux-persist
快速开始
1. 导入和初始化
ES6 模块化导入和初始化 Simple-Redux-Persist：
-- -------------------- ---- ------- ------ - ----------- - ---- ------- ------ - ------------- -------------- - ---- ---------------------- ------ ----------- ---- ------------------- ----- ------------- - - ---- ------- ---------- --------- -- ---------- -------- ------------ -- -------- - ----- ---------------- - ----------------------------- ------------ ----- ----- - ----------------------------- ----- --------- - -------------------
2. 自定义参数
在导入 Simple-Redux-Persist 时传递自定义配置参数：
-- -------------------- ---- -------
----- ------------- - -
---- -------
---------- ---------
-------- -------------
-------- ----- -- -------------
-------- ------- -- -
------ -
---------
-------- ----- -- ------ ---
-
- -- ------
-
----- ---------------- - ----------------------------- ------------3. 按需存储
可以使用黑名单以及白名单筛选需要存储的状态变量。列表内对应的不同变量将被存储或忽略：
const persistConfig = {
key: 'root',
storage: localStorage,
blacklist: ['blacklistedVar1', 'blacklistedVar2'], // 黑名单
whitelist: ['whitelistedVar1', 'whitelistedVar2'] // 白名单
}
const persistedReducer = persistReducer(persistConfig, rootReducer)示例代码
-- -------------------- ---- ------- ------ - ----------- - ---- ------- ------ - ------------- -------------- - ---- ---------------------- ------ ----------- ---- ------------------- ----- ------------- - - ---- ------- ---------- --------- -- ---------- -------- ------------ -- -------- - ----- ---------------- - ----------------------------- ------------ ----- ----- - ----------------------------- ----- --------- - ------------------- ------ - ------ --------- -
总结
Simple-Redux-Persist 提供了便捷的状态管理持久化的功能，使得前端应用可以更加优雅地管理状态，并且支持多样化的存储方式和高度配置的参数设置，可更好的满足各种场景下状态管理需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005600f81e8991b448ddf2c