简介
Redux 是一种极为流行的状态管理库，在 React 应用中广泛使用。但 Redux 的默认行为是将整个状态树保存在内存中，当页面重新渲染时，状态树被重新初始化，并且应用无法记住最后一次使用的状态。这对于一些需要即使刷新也不希望重置状态的场景来说是非常不方便的。
Redux-persist 是一个解决 Redux 持久化问题的解决方案。它可以将 Redux 状态存储在本地存储中，使得即使关闭浏览器，下次打开应用时仍然可以记住上一次使用的状态。
Redux-persist 可以与各种存储引擎一起使用，包括 localStorage，sessionStorage，AsyncStorage（在 React Native 中使用），IndexedDB 等等。
本文将详细介绍 Redux-persist 的使用方法和相关注意事项，并提供示例代码，帮助读者更好地使用 Redux-persist。
安装和基本用法
要使用 Redux-persist，需要先安装它：
npm install --save redux-persist
在应用的 Redux 配置中，需要将 Redux-persist 的配置应用到 store 上：
-- -------------------- ---- ------- ------ - ----------- - ---- -------- ------ - ------------- -------------- - ---- ---------------- ------ ------- ---- ---------------------------- -- --- ------------ ------ ----------- ---- ------------- ----- ------------- - - ---- ------- -------- -- ----- ---------------- - ----------------------------- ------------- ------ ----- ----- - ------------------------------ ------ ----- --------- - --------------------
以上代码使用了 Redux-persist 的 persistReducer 和 persistStore 两个核心 API，来创建一个持久化的 Redux store。
persistReducer 接收一个 Redux reducer 和一个配置对象 persistConfig，然后返回一个新的 reducer，在这个新的 reducer 中，被包装起来的 reducer 会被添加一个新的处理过程，以从本地存储中加载以及存储状态。
persistConfig 配置对象有以下属性：
key：用于在本地存储中存储 state 的 key。storage：设置 state 已序列化的存储引擎，例如 localStorage 或 sessionStorage。stateReconciler：（可选）对于persistReducer而言，合并已加载的 state 和初始 state 的函数。默认为autoMergeLevel1，可以使用autoMergeLevel2或自定义函数。transforms：（可选）在存储和加载之前转换 state 树的数据的一组转换器。例如，使用ImmutableJS、redux-immutable-state-invariant等。blacklist和whitelist：（可选）指定 state 中应该忽略或仅存储哪些属性。
persistStore 接收一个 Redux Store，返回一个新的 Store，它可以将 state 持久化到本地，以便在应用重新加载时将其还原。
自定义存储引擎
redux-persist 提供了一些预定义的存储引擎，包括：
localStoragesessionStorageAsyncStorage（在 React Native 中使用）IndexedDB
从 redux-persist v6.0.0 开始，为了避免直接依赖这些存储引擎，这些预定义的 storage 引擎已被移动到单独的仓库 redux-persist-webstorage 和 redux-persist-filesystem，而 redux-persist 仅支持引擎适配器（storage adapters），也就是说，任何实现了接口层的存储引擎都可以在 Redux-persist 中使用。
这里提供了一个自定义存储引擎的示例（使用 localforage）：
-- -------------------- ---- ------- ------ ----------- ---- -------------- ------ - ------------------------- - ---- --------------------------- -- --- ----------- -------------------- ------- ---------------------- -- ----------- ----- -------- -------- ---- --- -- ----- ----- ------- - --------------------------- -------- ------------ -- -- ----------- --- -- ------- ----- - --------- ----- ----- - ------------------------------ ----- --------- - ------------------- ----- -- -- - ----------------- -- ---- ----- --------- ---
注意事项
下面介绍一些使用 Redux-persist 的注意事项。
调试 Redux DevTools
使用 Redux DevTools 将被 Redux-persist 确切地包裹在 "redux-persist" 的 "store" 对象中，这意味着它不再是 Redux store 的直接子代。因此，当启用 Redux DevTools 时，必须使用 devToolsEnhancer() 而不是 window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() 以启用 DevTools。
import { devToolsEnhancer } from 'redux-devtools-extension';
export const store = createStore(
persistedReducer,
composeWithDevTools({ enhancer: devToolsEnhancer() })
);链式调用时的注意事项
在某些情况下，你可能希望链式调用 Redux store 的某些方法，例如想要保存 state 后立即导航到其他页面。Redux-persist 的 persistStore 方法会返回 Promise，而且它将 store 作为 Promise 形式的参数传递。这意味着你无法在 Promise 结束前获取 store 实例，因此无法完成链式调用的操作。
-- -------------------- ---- ------- -- ------------ ------- ----- -- --------------------------- -- - ---------------- ----- ------------- --- ------------------------ --- -- ------- ----------- -- ------------------- ----- -- -- - ---------------- ----- ------------- --- ------------------------ ---
对于链式调用的情况，可以使用 onSuccess 回调来解决这个问题，该回调会在 store 被成功地加载时触发，这样就可以使用 store 实例并完成操作了。
示例代码
下面是一个完整的使用示例（包括目录结构和 reducer 配置），以便更好地理解 Redux-persist 的使用。
目录结构
- src/
- actions/
- index.js
- reducers/
- index.js
- index.jsreducer 配置
-- -------------------- ---- -------
-- -------------------
------ - --------------- - ---- --------
------ - -------------- - ---- ----------------
------ ------- ---- ----------------------------
------ - --------- ----------- - ---- -------------
----- ------------ - ------ - --- ------- -- -
------ ------------- -
---- ---------
------ ---------- - --- ---------- ----- ------------ ---------- ----- ---
---- ------------
------ -------------- --
------- --- --------- - - -------- ---------- --------------- - - ----
--
--------
------ ------
-
--
----- ------------- - -
---- -------
--------
--
----- ----------- - -----------------
------ -------------
---
------ ------- ----------------------------- -------------action 配置
-- -------------------- ---- ------- -- ------------------ ------ - -- -- ---- - ---- ------- ------ ----- -------- - ----------- ------ ----- ----------- - -------------- ------ ----- ------- - ---- -- -- ----- --------- --- ------- ----- --- ------ ----- ---------- - -- -- -- ----- ------------ --- ---
store 配置
-- -------------------- ---- -------
-- ----------
------ ----- ---- --------
------ - ------ - ---- ------------
------ - -------- - ---- --------------
------ - ----------- - ---- --------
------ - ------------- -------------- - ---- ----------------
------ ------- ---- ----------------------------
------ ----------- ---- -------------
------ --- ---- --------
------ - -- ------------- ---- ------------------
----- ------------- - -
---- -------
--------
--
----- ---------------- - ----------------------------- -------------
----- ----- - ------------------------------
----- --------- - --------------------
-------
--------- --------------
---- --
------------
-------------------------------
--
---------------------------结论
Redux-persist 是一种非常有用的工具，它为 Redux 应用提供了一种简单的方法来持久化状态，从而更好地适应各种情况，并提高了用户体验。本文详细介绍了 Redux-persist 的使用说明及注意事项，并提供了示例代码，帮助读者更好地了解如何使用 Redux-persist。希望能够对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66ff98601b0bf82c71cc95a1