简介
Redux-persist 是一种 Redux 的持久化方案，它通过将 store 中的数据序列化到本地存储中，实现了一种简单、易用的数据持久化能力。
在使用 Redux 进行前端开发时，我们通常会遇到一些数据需要在刷新页面后保持不变。在这种情况下，需要将这些数据保存到本地浏览器存储中，以便在下一次加载页面时可以重新读取存储的数据。
Redux-persist 就是一个解决这个问题的库，它可以将 Redux 中的数据自动保存到本地存储中，并在重新加载页面时自动恢复数据。
安装
使用 Redux-persist 先需要安装相应的库，在项目的根目录下执行以下命令：
npm i redux-persist
配置
在项目中使用 Redux-persist，需要先对其进行配置，这里我们以使用 localStorage 为例进行说明。在 store.js 文件中，我们需要先引入相应的依赖：
import { persistStore, persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage' // 默认使用 localStorage
import { createStore } from 'redux'
import rootReducer from './reducers/index'然后，在 store.js 中进行配置：
-- -------------------- ---- ------- ----- ------------- - - ---- ------- -------- - ----- ---------------- - ----------------------------- ------------ ----- ----- - ----------------------------- ----- --------- - ------------------- ------ - ------ --------- -
这里我们的 persistConfig 对象设置了 key 和 storage，其中 key 是用于在存储中区分不同的存储对象的键值，storage 是用于选择使用哪一种本地存储方式。
此外，我们使用 persistReducer 函数将 reducer 和配置对象合并成一个新 reducer，在创建 store 时将新的 reducer 作为参数传入。最后，通过 persistStore 创建一个与 store 对象进行数据同步的 persistor 对象。
使用
在配置完成后，我们就可以在项目中自由使用持久化方案了。例如，我们现在有一个 todoList 的应用，我们希望每次刷新页面后都能自动恢复之前保存的 todoList 数据。
-- -------------------- ---- -------
------ - ------------ - ---- ---------------
------ - -------- - ---- -------------
------ - ----- - ---- ---------
------ - ----------- - ---- ---------------------------------
------ -------- ---- -----------------------
----- --- - -- -- -
----- --------- - -------------------
------ -
--------- --------------
------------ -------------- ----------------------
--------- --
--------------
-----------
-
-在这个示例代码中，我们将应用包裹在 PersistGate 组件中，这个组件会等待持久化数据加载完成后再渲染应用。如果你希望在加载数据时显示一个加载界面，可以将 loading 属性设置为相应组件。
总结
通过 Redux-persist，我们可以很方便地实现 Redux 数据对象的持久化存储。这个库极大地简化了前端开发中的一些常见问题，并为我们提供了更优秀的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66499c36d3423812e487e866
