React Native 是一个很棒的跨平台移动应用开发框架, 它采用了React的思想，能让开发者使用JavaScript语言开发 iOS 和 Android 应用，但随着项目的越来越大，管理数据变得越来越困难。Redux 提供了一种跨组件状态管理的解决方案，但问题是当应用程序重新载入时，Redux 状态将被清空。这时就需要一个数据持久化的工具。在这篇文章中，我将向您介绍在React Native 项目中如何使用 Redux-Persist 来持久化您的 Redux 状态，并在项目构建后还原它们。
什么是 Redux-Persist？
简单来说，Redux-Persist 是一个用于 Redux 状态持久化的库。它可以把 Redux的 state 存储到本地存储中，以便在应用程序重新加载时恢复它们。Redux-Persist 的工作方式是在 Redux 的 store 上创建一个中间件，并在 Redux 的 store.dispatch 方法中拦截 action，以便保持最新的状态。完整的过程是这样的：
如上图所示，Redux 的 store 状态存储在 persist 对象中，该对象由 Redux-Persist 提供。
在项目中安装和配置 Redux-Persist
首先，我们需要安装 redux-persist:
npm install --save redux-persist
接下来，我们需要在我们的项目中创建一个新的 persistConfig 对象，这个对象将作为 persistReducer 的参数超入，以实现将数据持久化到设备上。
-- -------------------- ---- ------- ------ - ------------- -------------- - ---- --------------- ------ ------- ---- --------------------------- -- -------- -- ------------ --- --- ----- ------------- - - ---- ------- -------- - ----- ----------- - ----------------- -- -------- -- ----- ---------------- - ----------------------------- ------------ ----- ----- - ----------------------------- ----- --------- - -------------------
persistConfig 对象包含一个 key 和 storage 属性。 key 表示我们要将 Redux 存储在哪个位置， storage 则指定了数据存储到哪里，本例中是将 state 存储到 localStorage。
注意，我们建议使用 combineReducers()将所有的 reducers 组合起来，并将其传递给 redux 的 createStore 方法。
接下来，我们需要在 Provider 组件中包装我们的应用程序，以便将 Redux store 和 persistor 对象提供给整个应用程序。这样一来，我们的组件就可以使用这些对象来访问到持久化状态。
-- -------------------- ---- -------
------ - -------- - ---- -------------
------ - ----------- - ---- ---------------------------------
----- --- - -- -- -
------ -
--------- --------------
------------ -------------- ----------------------
----- --
--------------
-----------
-
-在PersistGate中，loading属性设置为 null 表示在加载期间不显示任何内容，persistor 是从 Redux-Persist 使用 createPersistor 方法创建的。
现在, 当我们运行React Native 项目时，它会自动将我们的Redux状态保存到本地存储中，以便在下次重新加载时恢复。
在项目中使用 Redux-Persist
现在，我们已经将 Redux-Persist 集成到我们的项目中，可以在应用程序中使用它将状态持久化到本地存储中。
持久化指定的状态
只有当具有 whitelist（白名单）选项时，Redux-Persist 才会将状态保存到本地存储中。
import { persistStore, persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage'
const persistConfig = {
key: 'root',
storage,
whitelist: ['user'], // 将只有user的state持久化到本地存储中
};配置持久化
默认情况下，Redux-Persist 会将整个 Redux 存储到存储中，也可以根据需要覆盖默认值。为此，需要提供一个函数，该函数接受 Redux State，并以 State 的形式返回需要存储的数据。
-- -------------------- ---- -------
------ - ------------- -------------- - ---- ---------------
------ ------- ---- ---------------------------
----- ------------- - -
---- -------
--------
---------- ---------
----------- -
-
---------- --------- -- ---- ------ ----
---------- ------- -- -
------ -
---------
---- -- -- ------------------------
-
--
--
--
--上面的例子中 whitelist 和 transform 的属性用来选取需要持久化和转换的 state。
结论
在这篇文章中，我们学习了 Redux-Persist 如何在 React Native 项目中使用以及如何持久化数据状态。我们看到 Redux-Persist 简化了过程，并消除了需要开发者每次重新加载应用程序时从头开始建立状态的烦恼。
我们强烈建议您在大规模的 React Native 应用项目中使用 Redux-Persist 持久化您的状态。如果您正在处理大型数据集合并发，那么这将成为您努力优化应用程序性能中的一个重要步骤。
完整示例代码可以在下面的 Github 中找到。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6733fb010bc820c58245902c