Redux-persist 是一个用于将 Redux 应用状态持久化的库。它可以让你在刷新页面或关闭浏览器后，仍然能够保持应用的状态，让用户无需重新开始。
Redux-persist 提供了多种存储引擎，包括 localStorage、sessionStorage、IndexedDB 和 AsyncStorage 等。它还支持多种加密方式，可以保护你的数据安全。
安装
你可以使用 npm 或 yarn 安装 Redux-persist。
npm install redux-persist
yarn add redux-persist
使用
使用 Redux-persist 很简单。首先，你需要在应用的 store 中配置 persistReducer。
-- -------------------- ---- ------- ------ - ----------- - ---- -------- ------ - --------------- ------------ - ---- ---------------- ------ ------- ---- ---------------------------- ----- ------------- - - ---- ------- -------- -- ----- ----------- - ------- ------- -- - -- --- -- ----- ---------------- - ----------------------------- ------------- ------ ----- ----- - ------------------------------ ------ ----- --------- - --------------------
在上面的代码中，我们首先定义了一个名为 persistConfig 的配置对象，其中 key 表示存储的键名，storage 表示存储引擎，这里我们使用了 localStorage。接着，我们定义了 rootReducer，这是一个纯函数，用于处理 Redux 的 action。最后，我们使用 persistReducer 将 persistConfig 和 rootReducer 组合成一个新的 reducer，即 persistedReducer。
接下来，我们使用 createStore 创建了一个 store，并使用 persistStore 创建了一个 persistor。persistor 用于在应用中调用，以确保应用状态被正确地持久化。
现在，我们已经成功地将 Redux-persist 集成到了我们的应用中。接下来，我们可以在应用中使用 Redux。
示例
下面是一个简单的示例，演示了如何使用 Redux-persist。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------ ----------- - ---- --------------
------ - --------- - ---- ----------
------ - ------------- -------------- - ---- ----------------
------ ------- ---- ----------------------------
------ - -------- - ---- --------------
------ - ----------- - ---- --------
----- ------------- - -
---- -------
--------
--
----- ----------- - ------ - - ------ - -- ------- -- -
------ ------------- -
---- ------------
------ - --------- ------ ----------- - - --
---- ------------
------ - --------- ------ ----------- - - --
--------
------ ------
-
--
----- ---------------- - ----------------------------- -------------
----- ----- - ------------------------------
------ ------- -------- ----- -
----- ----- - ----------------- -- -------------
----- -------- - --------------
----- --------------- - -- -- -
---------- ----- ----------- ---
--
----- --------------- - -- -- -
---------- ----- ----------- ---
--
----- ----------- - -- -- -
------------------
-------------------------
--
------ -
--------- --------------
-----
---------- ------------
------- ------------------------------------
------- ------------------------------------
------- ------------------------------------
------
-----------
--
-在上面的代码中，我们定义了一个名为 rootReducer 的 reducer，它处理了两个 action：INCREMENT 和 DECREMENT。我们还定义了一个名为 store 的 Redux store，并将其传递给 Provider，以便在应用中使用 Redux。
在应用中，我们使用 useSelector 和 useDispatch 钩子来访问应用状态和分发 action。我们还定义了一个名为 handleReset 的函数，它用于重置应用状态。
结论
Redux-persist 是一个非常有用的库，它可以让你在刷新页面或关闭浏览器后，仍然能够保持应用的状态。在实际开发中，我们经常需要将应用状态持久化，Redux-persist 可以帮助我们轻松地实现这一点。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6777761dc1c5215e3cb79074