Redux 是一个用于 JavaScript 应用程序的可预测状态容器。它提供了一种可靠的方法来管理应用程序的状态，并确保状态的一致性。然而，Redux 默认情况下不提供状态持久化功能。这意味着当用户刷新页面或关闭浏览器时，应用程序的状态将被重置。在本文中，我们将介绍如何在 Redux 中实现状态持久化，以便在用户关闭应用程序后重新打开时，它们可以恢复应用程序的状态。
使用 Redux Persist
Redux Persist 是一个流行的库，用于在 Redux 中实现状态持久化。它使用本地存储（如 localStorage 或 AsyncStorage）来存储应用程序的状态，并在应用程序重新加载时自动恢复状态。Redux Persist 还提供了一些有用的功能，例如自定义序列化和反序列化函数，以及对黑名单和白名单的支持。
要使用 Redux Persist，我们需要首先安装它：
npm install redux-persist
然后，在 Redux createStore 函数中使用 persistReducer 来包装我们的 rootReducer：
-- -------------------- ---- ------- ------ - ----------- - ---- -------- ------ - --------------- ------------ - ---- ---------------- ------ ------- ---- ---------------------------- -- -------- -- ------------ --- --- ------ ----------- ---- ------------- ----- ------------- - - ---- ------- -------- -- ----- ---------------- - ----------------------------- ------------- ------ ----- ----- - ------------------------------ ------ ----- --------- - --------------------
在上面的代码中，我们首先导入 createStore、persistReducer 和 persistStore 函数。然后，我们创建一个名为 persistConfig 的对象，将其作为第一个参数传递给 persistReducer 函数。persistConfig 对象包含一个名为 key 的属性，该属性用于标识存储在本地存储中的状态。我们还指定了 storage 对象，该对象用于指定要使用的本地存储引擎。在这种情况下，我们使用默认的 localStorage 引擎。
然后，我们使用 persistReducer 函数将我们的 rootReducer 包装在一个新的 reducer 中。最后，我们将包装后的 reducer 传递给 createStore 函数，并使用 persistStore 函数创建一个名为 persistor 的对象，该对象用于管理状态的持久化。
现在，我们已经设置了 Redux Persist，我们可以在应用程序中使用 Redux，就像平常一样。Redux Persist 会自动将状态存储到本地存储中，并在应用程序重新加载时自动恢复状态。
自定义序列化和反序列化函数
有时，我们可能需要自定义状态的序列化和反序列化过程。例如，我们可能需要通过某种方式加密状态，以便在本地存储中存储敏感信息。Redux Persist 允许我们通过传递一个自定义的序列化和反序列化函数来实现这一点。
我们可以通过在 persistConfig 对象中传递 serialize 和 deserialize 函数来实现自定义序列化和反序列化：
const persistConfig = {
key: 'root',
storage,
serialize: (state) => encrypt(state),
deserialize: (state) => decrypt(state),
};在上面的代码中，我们定义了两个函数：serialize 和 deserialize。serialize 函数接受应用程序状态作为参数，并返回序列化后的状态。在这种情况下，我们使用 encrypt 函数对状态进行加密。deserialize 函数接受序列化后的状态作为参数，并返回反序列化后的状态。在这种情况下，我们使用 decrypt 函数对状态进行解密。
黑名单和白名单
有时，我们可能希望不将某些状态存储在本地存储中。例如，我们可能希望不存储用户的登录凭据。Redux Persist 支持黑名单和白名单，以便我们可以指定要存储或不存储的状态。
我们可以通过在 persistConfig 对象中传递一个名为 blacklist 或 whitelist 的数组来实现黑名单和白名单：
const persistConfig = {
key: 'root',
storage,
blacklist: ['auth'],
};在上面的代码中，我们定义了一个名为 blacklist 的数组，其中包含我们不希望存储的状态的名称。在这种情况下，我们不希望存储名为 auth 的状态。
我们也可以使用 whitelist 属性来指定要存储的状态。如果我们使用了 whitelist 属性，则只有在白名单中的状态才会存储在本地存储中。
示例代码
下面是一个简单的示例，演示如何在 Redux 中使用 Redux Persist：
-- -------------------- ---- -------
------ - ----------- - ---- --------
------ - --------------- ------------ - ---- ----------------
------ ------- ---- ----------------------------
----- ------------ - -
------ --
--
----- ----------- - ------ - ------------- ------- -- -
------ ------------- -
---- ------------
------ -
---------
------ ----------- - --
--
---- ------------
------ -
---------
------ ----------- - --
--
--------
------ ------
-
--
----- ------------- - -
---- -------
--------
---------- ----------
--
----- ---------------- - ----------------------------- -------------
------ ----- ----- - ------------------------------
------ ----- --------- - --------------------在上面的代码中，我们首先定义了一个名为 initialState 的对象，该对象包含一个名为 count 的属性。然后，我们定义了一个 rootReducer 函数，该函数接受状态和动作作为参数，并根据动作类型更新状态。我们使用了 spread 操作符来确保我们返回一个新的状态对象，而不是修改原始状态对象。
然后，我们定义了一个名为 persistConfig 的对象，该对象包含一个名为 key 的属性，用于标识存储在本地存储中的状态。我们还指定了 storage 对象，该对象用于指定要使用的本地存储引擎。在这种情况下，我们使用默认的 localStorage 引擎。我们还定义了一个名为 blacklist 的数组，该数组包含我们不希望存储的状态的名称。在这种情况下，我们不希望存储名为 count 的状态。
最后，我们使用 persistReducer 函数将我们的 rootReducer 包装在一个新的 reducer 中。我们将包装后的 reducer 传递给 createStore 函数，并使用 persistStore 函数创建一个名为 persistor 的对象，该对象用于管理状态的持久化。现在，我们已经设置了 Redux Persist，我们可以在应用程序中使用 Redux，就像平常一样。Redux Persist 会自动将状态存储到本地存储中，并在应用程序重新加载时自动恢复状态。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d944f0a941bf71340dafad
