什么是@vovkasm/redux-persist
@vovkasm/redux-persist 是一个基于 Redux 的持久化存储库。它可以将 Redux 的状态存储到本地缓存、IndexedDB、AsyncStorage 或其他类似的持久化存储中，并在重新加载时把它们还原为先前的状态。
如何使用@vovkasm/redux-persist
安装
使用 npm 安装：
npm install @vovkasm/redux-persist
或使用 yarn 安装：
yarn add @vovkasm/redux-persist
配置
-- -------------------- ---- ------- ------ - ----------- - ---- -------- ------ - ------------- -------------- - ---- ------------------------- ------ ------- ---- ---------------------------- -- -------- -- ------------ --- --- ----- ------------- - - ---- ------- -------- -- ----- ----------- - --- ----- ---------------- - ----------------------------- ------------- ------ ----- ----- - ------------------------------ ------ ----- --------- - --------------------
首先，我们需要引入 createStore、persistStore、persistReducer 以及 storage。
然后，我们要定义 persistConfig 对象，这个对象用来配置 persistence。
其中，key 属性用来定义在缓存中存储时使用的键。storage 属性用来指定用于存储的API。在这个例子中，我们使用默认的 localStorage。
接下来，我们定义 rootReducer。
然后，我们创建 persistedReducer，这是 Redux 的中间件，它负责处理存储和恢复操作。
最后，我们创建 store 和 persistor。store 是 Redux 的存储器，persistor 用于启用持久存储。
使用
import { PersistGate } from '@vovkasm/redux-persist/integration/react';
<PersistGate persistor={persistor}>
<App />
</PersistGate>这是我们传递给 React 组件的 PersistGate，它会保证当 store 还没有被加载时渲染 App 的优化体验。
最后，我们可以使用 store 中的状态：
-- -------------------- ---- -------
------ - ------------ ----------- - ---- --------------
----- --- - -- -- -
----- ------- - ----------------- -- --------------- -- - ----- --- ------- --
----- -------- - -------------- -- -- --------
------ -
-----
------------ --------------
------- ----------- -- ---------- ----- ----------- --------------
------- ----------- -- ---------- ----- ----------- --------------
------
--
--示例代码
-- -------------------- ---- -------
------ - ----------- - ---- --------
------ - ------------- -------------- - ---- -------------------------
------ ------- ---- ---------------------------- -- -------- -- ------------ --- ---
------ - -------- - ---- --------------
------ - ----------- - ---- -------------------------------------------
------ - ------------ ----------- - ---- --------------
----- ------------- - -
---- -------
--------
--
----- ------------ - -
-------- --
--
----- ----------- - ------ - ------------- ------- -- -
------ ------------- -
---- ------------
------ - --------- -------- ------------- - - --
---- ------------
------ - --------- -------- ------------- - - --
--------
------ ------
-
--
----- ---------------- - ----------------------------- -------------
----- ----- - ------------------------------
----- --------- - --------------------
----- --- - -- -- -
----- ------- - ----------------- -- ---------------
----- -------- - --------------
------ -
-----
------------ --------------
------- ----------- -- ---------- ----- ----------- --------------
------- ----------- -- ---------- ----- ----------- --------------
------
--
--
----- ---- - -- -- -
--------- --------------
------------ ----------------------
---- --
--------------
-----------
--
------ ------- -----以上是@vovkasm/redux-persist的使用教程，通过这篇文章，你已经学会了如何在 Redux 中使用持久化存储，希望这对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562ba81e8991b448dffa5