Redux-Persist 是一个用于持久化存储 Redux store 的库，它可以将 Redux store 中的数据保存到本地存储中，这样当用户关闭应用程序后，下次打开应用程序时，Redux store 中的数据可以被恢复。在 React Native 应用中使用 Redux-Persist 可以提高用户体验和应用程序的性能。
安装和配置
首先需要安装 Redux-Persist 和其依赖的库：
npm install redux-persist react-native-async-storage @react-native-community/async-storage
然后需要在应用程序中创建一个 Redux store，并将其传递给 Redux-Persist 的 persistReducer 函数：
-- -------------------- ---- ------- ------ - ----------- - ---- -------- ------ - --------------- ------------ - ---- ---------------- ------ ------------ ---- ---------------------------------------- ------ ----------- ---- ------------- ----- ------------- - - ---- ------- -------- ------------- -- ----- ---------------- - ----------------------------- ------------- ------ ----- ----- - ------------------------------ ------ ----- --------- - --------------------
在上面的代码中，我们首先引入了 createStore、persistReducer 和 persistStore 函数，然后创建了一个 persistConfig 对象，这个对象中包含了一个 key 属性和一个 storage 属性，key 属性用于指定存储的键名，storage 属性用于指定存储的方式，这里我们使用了 AsyncStorage，它是一个 React Native 的本地存储库。然后我们将 persistConfig 对象和 rootReducer 函数传递给 persistReducer 函数，创建了一个 persistedReducer 函数，这个函数可以将 Redux store 中的数据持久化存储。最后我们创建了一个 Redux store 和一个 persistor 对象，这个 persistor 对象可以用于在应用程序中恢复 Redux store 中的数据。
在应用程序中使用
现在我们已经成功地配置了 Redux-Persist，下面我们就可以在应用程序中使用它了。在应用程序中，我们可以使用 persistStore 函数来初始化 persistor 对象，然后将 persistor 对象传递给 PersistGate 组件，这个组件可以用于等待 Redux store 中的数据被恢复：
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- --------------
------ - ----------- - ---- ----------------------------------
------ - ------ --------- - ---- ----------
------ --- ---- --------
------ ------- -------- ------ -
------ -
--------- --------------
------------ -------------- ----------------------
---- --
--------------
-----------
--
-在上面的代码中，我们首先引入了 Provider 和 PersistGate 组件，然后创建了一个 Main 组件，这个组件中包含了一个 Provider 组件和一个 PersistGate 组件。在 Provider 组件中，我们将 store 对象传递给了应用程序的根组件，这样就可以在所有组件中使用 Redux store 中的数据。在 PersistGate 组件中，我们将 persistor 对象传递给了应用程序的根组件，这个组件可以用于等待 Redux store 中的数据被恢复。
示例代码
下面是一个简单的示例代码，它演示了在 React Native 应用中使用 Redux-Persist 的方法：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- ----- ---------------- - ---- ---------------
------ - -------- - ---- --------------
------ - ----------- - ---- ----------------------------------
------ - ------ --------- - ---- ----------
-------- ----- -
----- ------- --------- - ------------------
----- --------------- - -- -- -
-------------- - ---
--
----- --------------- - -- -- -
-------------- - ---
--
------ -
----- -------- ----- -- --------------- --------- ----------- -------- ---
----- -------- --------- -- --------- --------------
----------------- --------------------------
----- -------- --------- -- -----------
-------------------
----------------- --------------------------
----- -------- --------- -- -----------
-------------------
-------
--
-
------ ------- -------- ------ -
------ -
--------- --------------
------------ -------------- ----------------------
---- --
--------------
-----------
--
-在上面的代码中，我们创建了一个 App 组件，这个组件中包含了一个计数器和两个按钮，当用户点击这两个按钮时，计数器的值会增加或减少。在 Main 组件中，我们将 Provider 和 PersistGate 组件传递给了应用程序的根组件，这样就可以在所有组件中使用 Redux store 中的数据，并且当用户关闭应用程序后，下次打开应用程序时，Redux store 中的数据可以被恢复。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d3f768a941bf71347840dd
