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