介绍
在 React 和 React Native 中，Redux 是一种流行的状态管理库。它允许我们将应用程序状态存储在单个存储库中，并轻松地在应用程序中共享和使用。但是，当我们刷新页面时，Redux 状态将被清除。这意味着我们需要重新加载数据和重新设置应用程序状态。这就是 Redux-persist 出现的原因。
Redux-persist 是一个用于持久化 Redux 存储的库，它可以将 Redux 存储中的数据保存在本地存储、AsyncStorage 或其他存储引擎中。这意味着即使用户刷新页面，应用程序的状态也会被保存下来，以便在下一次加载时恢复。
安装
你可以使用 npm 或 yarn 安装 Redux-persist：
npm install redux-persist # 或者 yarn add redux-persist
使用
配置
在使用 Redux-persist 之前，我们需要配置它。我们需要使用 persistReducer 函数来创建一个新的 Redux 存储，该存储会自动将状态持久化到本地存储中。
-- -------------------- ---- ------- ------ - ----------- - ---- -------- ------ - ------------- -------------- - ---- ---------------- ------ ------- ---- ---------------------------- -- --- ------------ ----- ------------- - - ---- ------- -------- -- ----- ----------- - ------- ------- -- - -- --- -- ----- ---------------- - ----------------------------- ------------- ------ ----- ----- - ------------------------------ ------ ----- --------- - --------------------
在上面的示例中，我们首先导入了 createStore、persistStore、persistReducer 和 storage。然后，我们定义了一个名为 persistConfig 的常量，该常量包含一个 key 和一个 storage 对象。key 用于指定存储在本地存储中的数据的键名，storage 则指定了使用哪种存储引擎。
接下来，我们定义了一个 rootReducer，它是我们应用程序的根 Reducer。我们将 rootReducer 传递给 persistReducer 函数，该函数会返回一个新的 Reducer，该 Reducer 会自动将状态持久化到本地存储中。
最后，我们使用 createStore 函数创建一个新的 Redux 存储，并使用 persistStore 函数创建一个新的 persistor 对象。persistor 对象用于在应用程序中调用 persistStore 函数，以确保状态持久化。
持久化
现在，我们已经配置了 Redux-persist，下面我们来看看如何将状态持久化到本地存储中。
-- -------------------- ---- -------
------ - ------------ - ---- ----------------
------ - ----- - ---- ----------
----- --- - -- -- -
------------ -- -
--------------------
-- ----
------ -
-- ---
--
--在上面的示例中，我们导入了 persistStore 和 store，store 是我们在上一节中创建的 Redux 存储。然后，我们在 useEffect 钩子中调用 persistStore(store) 函数，以确保状态持久化。
黑名单和白名单
有时，我们不想将所有数据都保存在本地存储中。这时，我们可以使用黑名单或白名单来指定要存储或排除的属性。
const persistConfig = {
key: 'root',
storage,
blacklist: ['isLoading'],
whitelist: ['user'],
};在上面的示例中，我们将 isLoading 属性添加到了黑名单中，这意味着它不会被存储在本地存储中。我们还将 user 属性添加到了白名单中，这意味着它将被存储在本地存储中。
自定义存储引擎
除了默认的本地存储和 AsyncStorage，Redux-persist 还支持自定义存储引擎。这意味着你可以使用任何你喜欢的存储引擎来持久化状态。
-- -------------------- ---- ------- ------ - ----------- - ---- -------- ------ - ------------- -------------- - ---- ---------------- ------ - ------------- - ---- ------------------ ----- ------------- - - ---- ------- -------- -------------- -- ----- ----------- - ------- ------- -- - -- --- -- ----- ---------------- - ----------------------------- ------------- ------ ----- ----- - ------------------------------ ------ ----- --------- - --------------------
在上面的示例中，我们使用 customStorage 作为存储引擎。如果你想使用自定义存储引擎，只需将其传递给 persistConfig 对象即可。
实现原理
Redux-persist 的实现原理很简单。它使用了一个名为 persistReducer 的高阶函数，该函数接受一个 Reducer 和一个配置对象，然后返回一个新的 Reducer。
新的 Reducer 会在每次调用时先调用原始 Reducer，然后将返回的状态对象存储到本地存储中。当应用程序重新加载时，Redux-persist 会从本地存储中加载状态，并将其传递给 Reducer。
结论
Redux-persist 是一个强大的库，它可以帮助我们轻松地将 Redux 状态持久化到本地存储中。通过使用 Redux-persist，我们可以确保即使用户刷新页面，应用程序的状态也会被保存下来，以便在下一次加载时恢复。如果你正在使用 Redux，那么 Redux-persist 绝对值得一试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675539ba1b963fe9cc52ec07