摘要:首先我們想到的就是,是沒有時間限制的數據存儲,我們可以通過它來實現數據的持久化存儲。那么有沒有結合來達到持久數據存儲功能的框架呢當然,它就是。會將的中的數據緩存到瀏覽器的中。
在React項目中,我們經常會通過redux以及react-redux來存儲和管理全局數據。但是通過redux存儲全局數據時,會有這么一個問題,如果用戶刷新了網頁,那么我們通過redux存儲的全局數據就會被全部清空,比如登錄信息等。
這個時候,我們就會有全局數據持久化存儲的需求。首先我們想到的就是localStorage,localStorage是沒有時間限制的數據存儲,我們可以通過它來實現數據的持久化存儲。
但是在我們已經使用redux來管理和存儲全局數據的基礎上,再去使用localStorage來讀寫數據,這樣不僅是工作量巨大,還容易出錯。那么有沒有結合redux來達到持久數據存儲功能的框架呢?當然,它就是redux-persist。redux-persist會將redux的store中的數據緩存到瀏覽器的localStorage中。
redux-persist的使用
1、對于reducer和action的處理不變,只需修改store的生成代碼,修改如下
import {createStore} from "redux" import reducers from "../reducers/index" import {persistStore, persistReducer} from "redux-persist"; import storage from "redux-persist/lib/storage"; import autoMergeLevel2 from "redux-persist/lib/stateReconciler/autoMergeLevel2"; const persistConfig = { key: "root", storage: storage, stateReconciler: autoMergeLevel2 // 查看 "Merge Process" 部分的具體情況 }; const myPersistReducer = persistReducer(persistConfig, reducers) const store = createStore(myPersistReducer) export const persistor = persistStore(store) export default store
2、在index.js中,將PersistGate標簽作為網頁內容的父標簽
import React from "react"; import ReactDOM from "react-dom"; import {Provider} from "react-redux" import store from "./redux/store/store" import {persistor} from "./redux/store/store" import {PersistGate} from "redux-persist/lib/integration/react"; ReactDOM.render(, document.getElementById("root")); {/*網頁內容*/}
這就完成了通過redux-persist實現React持久化本地數據存儲的簡單應用
3、最后我們調試查看瀏覽器中的localStorage緩存數據
發現數據已經存儲到了localStorage中,此時刷新網頁,redux中的數據也不會丟失
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/101670.html
摘要:日常項目直接使用是完全沒有問題的,可是隨著項目的日益壯大,組件數量的逐漸增長,組件之間的嵌套使得數據的管理越來越繁重。最后數據保存進了中的,頁面也會根據的改變自動更新。 以下文章均為個人近期所學心得,自學react、redux,逐漸找到自己的方向,現將自己的方向方式寫出來,以供大家學習參考,肯定會有不足,歡迎批評指正。 日常項目直接使用react是完全沒有問題的,可是隨著項目的日益壯大...
摘要:之前寫了一篇沒有加入的的小博文。一拆分結構根據自己的習慣和固定套路,拆分目錄結構和組件結構。把的導航組件集中放在純粹是個人習慣。二代碼實現入口文件是用來做的數據持久化。添加事項后要通知其他組件更新數據。 讀前須知 這個項目是第一次使用Redux的實例,并不具有專業性的理論知識。純粹分享一次開發過程與心得。之前寫了一篇沒有加入Redux的React Native ToDoList的小博文...
摘要:的使用用戶發出函數算出新的重新渲染三大原則單一數據源,利用的形式向下傳播數據流決定只讀,通過修改通過純函數來修改組件狀態,是描述動作的純函數連接和基于全局的,選擇我們要注入的不同的組件分開把注入,讀取方法三劍客先確定一下初始狀 redux的使用 react-native, react, react-redux, react-navigaition, redux-thunk, redu...
摘要:初始值,優先級低于傳給的,如下此時,在后為以格式定義。用于處理同步操作,唯一可以修改的地方。由觸發,可以觸發,可以和服務器交互,可以獲取全局的數據等等。取消注冊,清理和。如果沒有返回函數,使用會給予警告注冊路由表。 前言 dva 首先是一個基于 redux 和 redux-saga 的數據流方案,然后為了簡化開發體驗,dva 還額外內置了 react-router 和 fetch,所以...
閱讀 2785·2021-11-04 16:15
閱讀 3458·2021-09-29 09:35
閱讀 4032·2021-09-22 15:45
閱讀 1417·2019-08-30 15:55
閱讀 1689·2019-08-30 15:44
閱讀 2711·2019-08-29 12:56
閱讀 2698·2019-08-26 13:30
閱讀 2169·2019-08-23 17:00