简介
redux-persist-immutable-x 是一个基于 redux-persist 的持久化解决方案，针对使用 immutable.js 的 redux 应用进行了优化。该包可以实现在 redux 应用中将 store 中的数据持久化到本地存储中，使得在页面刷新时数据能够被恢复，或者在应用关闭时数据不会丢失。
安装
在项目根目录下安装 redux-persist 和 redux-persist-immutable-x：
npm install redux-persist redux-persist-immutable-x
使用方法
- 定义 redux 的 store
在项目中创建一个 Redux store 对象，并将其传递给 redux-persist-immutable-x 的 persistReducer 函数：
-- -------------------- ---- ------- ------ - ----------- - ---- -------- ------ - -------------- - ---- ---------------- ------ ------- ---- ---------------------------- ------ ----------- ---- ------------- ----- ------------- - - ---- ------- -------- -- ----- ---------------- - ----------------------------- ------------- ----- ----- - ------------------------------ ------ ------- ------
persistConfig 对象将使用 redux-persist 的 storage 将数据存储到本地存储中，而 persistedReducer 是将所有 reducer 组成的根 reducer 和 persistConfig 对象传递给 redux-persist 的 persistReducer 函数返回的持久化 reducer。
- 将 redux 中的状态持久化
persistStore 是 redux-persist 接口返回的一个函数，它将 store 包装在一个组件中（Provider），以使所有组件都能访问 store。需要注意的是，由于持久化需要时间，因此需要等到持久化完成后再渲染 App 组件。
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- --------------
------ - ------------ - ---- ----------------
------ ----- ---- ----------
----- --- - -- -- -
----- --------- - --------------------
------ -
--------- --------------
--- ------ ---
-----------
--
--- 配置持久化白名单
可以在 persistConfig 对象中配置一个 whitelist 数组，以指定哪些 reducer 将被持久化。例如只需在 app reducer 中存储 state.auth，可以将其加入白名单中：
const persistConfig = {
key: 'root',
storage,
whitelist: ['auth'],
};示例代码
-- -------------------- ---- ------- ------ - ----------- - ---- -------- ------ - -------------- - ---- ---------------- ------ ------- ---- ---------------------------- ------ ----------- ---- ------------- ----- ------------- - - ---- ------- -------- ---------- --------- -- ----- ---------------- - ----------------------------- ------------- ----- ----- - ------------------------------ ------ ------- ------
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- --------------
------ - ------------ - ---- ----------------
------ ----- ---- ----------
----- --- - -- -- -
----- --------- - --------------------
------ -
--------- --------------
--- ------ ---
-----------
--
--总结
redux-persist-immutable-x 提供了一个简单的方法，可以将 redux 中的 store 持久化到本地存储中，以便在刷新或关闭页面时进行恢复。通过配置白名单，使其只能持久化部分 reducer 的状态，同时避免了非必要的存储，提高了存储效率。如果你的项目使用了 immutable.js 和 redux，那么 redux-persist-immutable-x 是一个非常好的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600567c681e8991b448e4056