React通過redux-persist持久化數(shù)據(jù)存儲(chǔ)的方法示例
在React項(xiàng)目中,我們經(jīng)常會(huì)通過redux以及react-redux來存儲(chǔ)和管理全局?jǐn)?shù)據(jù)。但是通過redux存儲(chǔ)全局?jǐn)?shù)據(jù)時(shí),會(huì)有這么一個(gè)問題,如果用戶刷新了網(wǎng)頁,那么我們通過redux存儲(chǔ)的全局?jǐn)?shù)據(jù)就會(huì)被全部清空,比如登錄信息等。
這個(gè)時(shí)候,我們就會(huì)有全局?jǐn)?shù)據(jù)持久化存儲(chǔ)的需求。首先我們想到的就是localStorage,localStorage是沒有時(shí)間限制的數(shù)據(jù)存儲(chǔ),我們可以通過它來實(shí)現(xiàn)數(shù)據(jù)的持久化存儲(chǔ)。
但是在我們已經(jīng)使用redux來管理和存儲(chǔ)全局?jǐn)?shù)據(jù)的基礎(chǔ)上,再去使用localStorage來讀寫數(shù)據(jù),這樣不僅是工作量巨大,還容易出錯(cuò)。那么有沒有結(jié)合redux來達(dá)到持久數(shù)據(jù)存儲(chǔ)功能的框架呢?當(dāng)然,它就是redux-persist。redux-persist會(huì)將redux的store中的數(shù)據(jù)緩存到瀏覽器的localStorage中。
redux-persist的使用
1、對(duì)于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(<Provider store={store}> <PersistGate loading={null} persistor={persistor}> {/*網(wǎng)頁內(nèi)容*/} </PersistGate> </Provider>, document.getElementById('root'));
這就完成了通過redux-persist實(shí)現(xiàn)React持久化本地?cái)?shù)據(jù)存儲(chǔ)的簡單應(yīng)用
3、最后我們調(diào)試查看瀏覽器中的localStorage緩存數(shù)據(jù)
發(fā)現(xiàn)數(shù)據(jù)已經(jīng)存儲(chǔ)到了localStorage中,此時(shí)刷新網(wǎng)頁,redux中的數(shù)據(jù)也不會(huì)丟失
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
ReactNative錯(cuò)誤采集原理在Android中實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了ReactNative錯(cuò)誤采集原理在Android中實(shí)現(xiàn)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02React Native Popup實(shí)現(xiàn)示例
本文主要介紹了React Native Popup實(shí)現(xiàn)示例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05React函數(shù)式組件Hook中的useState函數(shù)的詳細(xì)解析
Hook 就是 JavaScript 函數(shù),這個(gè)函數(shù)可以幫助你鉤入(hook into) React State以及生命周期等特性,這篇文章主要介紹了React Hook useState函數(shù)的詳細(xì)解析的相關(guān)資料,需要的朋友可以參考下2022-10-10淺談React?Refs?使用場(chǎng)景及核心要點(diǎn)
本文主要介紹了React?Refs?使用場(chǎng)景及核心要點(diǎn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06