Redux 是一个常用的状态管理库，React 是一个常用的前端框架。Redux 在 React 中使用非常方便，但是有一个问题：当用户刷新页面时，Redux 的状态会丢失。为了解决这个问题，Redux-Persist 库应运而生，它可以将 Redux 的状态持久化到本地存储中。本文将详细介绍如何在 React 中集成 Redux-Persist。
安装 Redux 和 Redux-Persist
在使用 Redux-Persist 之前，需要先安装 Redux 和 Redux-Persist。可以使用 npm 或者 yarn 安装它们：
npm install redux redux-persist
或者
yarn add redux redux-persist
创建 redux store
创建 Redux 的 store 和普通的创建方式一样，但是需要使用 Redux-Persist 的 persistReducer 方法包装 reducer。下面是一个示例：
-- -------------------- ---- -------
------ - ----------- - ---- --------
------ - -------------- - ---- ----------------
------ ------- ---- ----------------------------
----- ------------ - ---
----- ----------- - ------ - ------------- ------- -- -
------ ------------- -
--------
------ ------
-
--
----- ------------- - -
---- -------
--------
--
----- ---------------- - ----------------------------- -------------
----- ----- - ------------------------------
------ ------- ------在这个示例中，persistReducer 方法接收一个配置对象和一个原始 reducer，返回一个新的 reducer。配置对象中有一个 key 属性表示存储的键名，storage 属性指定存储方式，这里使用 localStorage。
然后将新的 reducer 传给 createStore 方法来创建 Redux 的 store。
创建 persistor
为了管理 Redux 的持久化状态，需要创建一个 persistor 对象，并将 store 对象传给它。下面是一个示例：
import { persistStore } from "redux-persist";
import store from "./store";
const persistor = persistStore(store);
export default persistor;在 React 中使用 store 和 persistor
现在 Redux 的 store 和 persistor 已经创建好了，如何在 React 中使用它们呢？
一般来说，在应用的根组件中使用 Provider 组件将 store 传递给子组件，示例代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- --------------
------ ----- ---- ----------
-------- ----- -
------ -
--------- --------------
--------- --- ----------
-----------
--
-
------ ------- ----现在需要使用 PersistGate 组件来封装 Provider 组件，并传递 persistor 对象。PersistGate 会在 store 加载完成后再加载应用程序。示例代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- --------------
------ - ----------- - ---- ----------------------------------
------ ----- ---- ----------
------ --------- ---- --------------
------ --- ---- --------
-------- ------ -
------ -
--------- --------------
------------ ------------------------------- ----------------------
---- --
--------------
-----------
--
-
------ ------- -----在这个示例中，PersistGate 组件接收 loading 属性，表示在 store 加载完成前显示的内容。
至此，Redux-Persist 的集成已经完成了。现在可以在 Redux 的状态中存储数据，在刷新页面后仍然可以保留数据。
示例
下面是一个示例，展示如何在 Redux 的状态中存储一个计数器的数据并在应用程序中进行操作，即使刷新页面也可以保留数据。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------ ----------- - ---- --------------
-------- ----- -
----- ----- - ------------------- -- -------------
----- -------- - --------------
------ -
-----
----------- -------------
------- ----------- -- ---------- ----- ----------- --------------
------- ----------- -- ---------- ----- ----------- --------------
------
--
-
------ ------- ------ -------------------- ---- -------
------ - ----------- - ---- --------
------ - -------------- - ---- ----------------
------ ------- ---- ----------------------------
----- ------------ - - ------ - --
----- ----------- - ------ - ------------- ------- -- -
------ ------------- -
---- ------------
------ - --------- ------ ----------- - - --
---- ------------
------ - --------- ------ ----------- - - --
--------
------ ------
-
--
----- ------------- - -
---- -------
--------
--
----- ---------------- - ----------------------------- -------------
----- ----- - ------------------------------
------ ------- ------import { persistStore } from "redux-persist";
import store from "./store";
const persistor = persistStore(store);
export default persistor;-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- --------------
------ - ----------- - ---- ----------------------------------
------ ----- ---- ----------
------ --------- ---- --------------
------ --- ---- --------
-------- ------ -
------ -
--------- --------------
------------ ------------------------------- ----------------------
---- --
--------------
-----------
--
-
------ ------- -----总结
在 React 中集成 Redux-Persist 可以使 Redux 的状态持久化到本地存储中，从而解决了当用户刷新页面时 Redux 状态丢失的问题。本文介绍了 Redux-Persist 在 React 中的集成及示例，希望可以帮助读者更好地理解及应用 Redux。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64add12248841e98949d0ca4