資訊專欄INFORMATION COLUMN
摘要：首先我們想到的就是，是沒有時(shí)間限制的數(shù)據(jù)存儲，我們可以通過它來實(shí)現(xiàn)數(shù)據(jù)的持久化存儲。那么有沒有結(jié)合來達(dá)到持久數(shù)據(jù)存儲功能的框架呢當(dāng)然，它就是。會將的中的數(shù)據(jù)緩存到瀏覽器的中。
在React項(xiàng)目中，我們經(jīng)常會通過redux以及react-redux來存儲和管理全局?jǐn)?shù)據(jù)。但是通過redux存儲全局?jǐn)?shù)據(jù)時(shí)，會有這么一個(gè)問題，如果用戶刷新了網(wǎng)頁，那么我們通過redux存儲的全局?jǐn)?shù)據(jù)就會被全部清空，比如登錄信息等。
這個(gè)時(shí)候，我們就會有全局?jǐn)?shù)據(jù)持久化存儲的需求。首先我們想到的就是localStorage，localStorage是沒有時(shí)間限制的數(shù)據(jù)存儲，我們可以通過它來實(shí)現(xiàn)數(shù)據(jù)的持久化存儲。
但是在我們已經(jīng)使用redux來管理和存儲全局?jǐn)?shù)據(jù)的基礎(chǔ)上，再去使用localStorage來讀寫數(shù)據(jù)，這樣不僅是工作量巨大，還容易出錯(cuò)。那么有沒有結(jié)合redux來達(dá)到持久數(shù)據(jù)存儲功能的框架呢？當(dāng)然，它就是redux-persist。redux-persist會將redux的store中的數(shù)據(jù)緩存到瀏覽器的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標(biāo)簽作為網(wǎng)頁內(nèi)容的父標(biāo)簽
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(
{/*網(wǎng)頁內(nèi)容*/}
, document.getElementById("root"));
這就完成了通過redux-persist實(shí)現(xiàn)React持久化本地?cái)?shù)據(jù)存儲的簡單應(yīng)用
3、最后我們調(diào)試查看瀏覽器中的localStorage緩存數(shù)據(jù)
發(fā)現(xiàn)數(shù)據(jù)已經(jīng)存儲到了localStorage中，此時(shí)刷新網(wǎng)頁，redux中的數(shù)據(jù)也不會丟失
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/101670.html
摘要：日常項(xiàng)目直接使用是完全沒有問題的，可是隨著項(xiàng)目的日益壯大，組件數(shù)量的逐漸增長，組件之間的嵌套使得數(shù)據(jù)的管理越來越繁重。最后數(shù)據(jù)保存進(jìn)了中的，頁面也會根據(jù)的改變自動(dòng)更新。 以下文章均為個(gè)人近期所學(xué)心得，自學(xué)react、redux，逐漸找到自己的方向，現(xiàn)將自己的方向方式寫出來，以供大家學(xué)習(xí)參考，肯定會有不足，歡迎批評指正。 日常項(xiàng)目直接使用react是完全沒有問題的，可是隨著項(xiàng)目的日益壯大...
摘要：之前寫了一篇沒有加入的的小博文。一拆分結(jié)構(gòu)根據(jù)自己的習(xí)慣和固定套路，拆分目錄結(jié)構(gòu)和組件結(jié)構(gòu)。把的導(dǎo)航組件集中放在純粹是個(gè)人習(xí)慣。二代碼實(shí)現(xiàn)入口文件是用來做的數(shù)據(jù)持久化。添加事項(xiàng)后要通知其他組件更新數(shù)據(jù)。 讀前須知 這個(gè)項(xiàng)目是第一次使用Redux的實(shí)例，并不具有專業(yè)性的理論知識。純粹分享一次開發(fā)過程與心得。之前寫了一篇沒有加入Redux的React Native ToDoList的小博文...
摘要：的使用用戶發(fā)出函數(shù)算出新的重新渲染三大原則單一數(shù)據(jù)源，利用的形式向下傳播數(shù)據(jù)流決定只讀，通過修改通過純函數(shù)來修改組件狀態(tài)，是描述動(dòng)作的純函數(shù)連接和基于全局的，選擇我們要注入的不同的組件分開把注入，讀取方法三劍客先確定一下初始狀 redux的使用 react-native, react, react-redux, react-navigaition, redux-thunk, redu...
摘要：初始值，優(yōu)先級低于傳給的，如下此時(shí)，在后為以格式定義。用于處理同步操作，唯一可以修改的地方。由觸發(fā)，可以觸發(fā)，可以和服務(wù)器交互，可以獲取全局的數(shù)據(jù)等等。取消注冊，清理和。如果沒有返回函數(shù)，使用會給予警告注冊路由表。 前言 dva 首先是一個(gè)基于 redux 和 redux-saga 的數(shù)據(jù)流方案，然后為了簡化開發(fā)體驗(yàn)，dva 還額外內(nèi)置了 react-router 和 fetch，所以...
閱讀 2798·2021-11-04 16:15
閱讀 3476·2021-09-29 09:35
閱讀 4066·2021-09-22 15:45
閱讀 1426·2019-08-30 15:55
閱讀 1700·2019-08-30 15:44
閱讀 2737·2019-08-29 12:56
閱讀 2708·2019-08-26 13:30
閱讀 2183·2019-08-23 17:00
