詳解在React-Native中持久化redux數(shù)據(jù)
在最近的一個(gè)項(xiàng)目中，要求對(duì) redux 數(shù)據(jù)做持久化處理，經(jīng)過(guò)研究后成功實(shí)現(xiàn)，在此記錄一下過(guò)程
我們可以使用 redux-persist 對(duì)數(shù)據(jù)做持久化處理
安裝
npm i --save redux-persist
使用
安裝成功后，我們需要對(duì) store 代碼進(jìn)行修改，這是我的 store 生成文件
import {applyMiddleware, createStore, compose} from 'redux';
import {createLogger} from 'redux-logger';
import thunk from 'redux-thunk';
import reducers from '../reducers';
import {persistStore, persistReducer} from 'redux-persist';
import storage from 'redux-persist/lib/storage'
const persistConfig = {
key: 'milk', # 對(duì)于數(shù)據(jù) key 的定義
storage, # 選擇的存儲(chǔ)引擎
}
# 對(duì) reducers 的封裝處理
const persistedReducer = persistReducer(persistConfig, reducers)
let loggerMiddleware = createLogger();
export default function configureStore() {
const enhancers = compose(
applyMiddleware(thunk, loggerMiddleware),
);
# 處理后的 reducers 需要作為參數(shù)傳遞在 createStore 中
const store = createStore(persistedReducer, enhancers)
# 持久化 store
let persistor = persistStore(store)
return {store, persistor}
}
在 react-native 中，存儲(chǔ)引擎默認(rèn)為 AsyncStorage
Android是以key=>value的形式存儲(chǔ)在本地sqlite中
iOS 是直接存沙盒文件
其中還有很多可以配置的地方，大家自行參考官方文檔
修改完生成 store 代碼后，在入口文件做一次修改，需要引入 PersistGate 來(lái)進(jìn)行二次的組裝
import React, {Component} from 'react';
import {Provider} from 'react-redux';
import HomeContainer from './container/HomeContainer'
import configureStore from './redux/store'
import {PersistGate} from 'redux-persist/integration/react' # 看這里
const {store, persistor} = configureStore();
class App extends Component {
render() {
return (
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<HomeContainer/>
</PersistGate>
</Provider>
);
}
}
export default App
簡(jiǎn)單配置即可，我們可以看一下效果
效果
參考文檔
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
React?antd中setFieldsValu的簡(jiǎn)便使用示例代碼
form.setFieldsValue是antd?Form組件中的一個(gè)方法,用于動(dòng)態(tài)設(shè)置表單字段的值,它接受一個(gè)對(duì)象作為參數(shù),對(duì)象的鍵是表單字段的名稱,值是要設(shè)置的字段值,這篇文章主要介紹了React?antd中setFieldsValu的簡(jiǎn)便使用,需要的朋友可以參考下2023-08-08
使用react在修改state中的數(shù)組和對(duì)象數(shù)據(jù)的時(shí)候(setState)
這篇文章主要介紹了使用react在修改state中的數(shù)組和對(duì)象數(shù)據(jù)的時(shí)候(setState)，具有很好的參考價(jià)值，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
React 無(wú)狀態(tài)組件(Stateless Component) 與高階組件
這篇文章主要介紹了React 無(wú)狀態(tài)組件(Stateless Component) 與高階組件，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
導(dǎo)航組件Navigator可以讓我們客戶端在不同的頁(yè)面見進(jìn)行切換，下面這篇文章主要給大家介紹了關(guān)于React Native中Navigator的使用方法，文中通過(guò)圖文介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-10-10
React實(shí)現(xiàn)阿里云OSS上傳文件的示例
這篇文章主要介紹了React實(shí)現(xiàn)阿里云OSS上傳文件的示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
React+高德地圖實(shí)時(shí)獲取經(jīng)緯度,定位地址
思路其實(shí)沒(méi)有那么復(fù)雜，把地圖想成一個(gè)盒子容器，地圖中心點(diǎn)想成盒子中心點(diǎn)；扎點(diǎn)在【地圖中心點(diǎn)】不會(huì)動(dòng)，當(dāng)移動(dòng)地圖時(shí)，去獲取【地圖中心點(diǎn)】經(jīng)緯度，設(shè)置某個(gè)位置的時(shí)候，將經(jīng)緯度設(shè)置為【地圖中心點(diǎn)】即可2021-06-06
react?路由權(quán)限動(dòng)態(tài)菜單方案配置react-router-auth-plus
這篇文章主要為大家介紹了react路由權(quán)限動(dòng)態(tài)菜單方案react-router-auth-plus傻瓜式配置詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
React在Dva項(xiàng)目中創(chuàng)建并引用頁(yè)面局部組件的方式
這篇文章主要介紹了React在Dva項(xiàng)目中創(chuàng)建并引用頁(yè)面局部組件的方式,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-07-07
antd中form表單的wrapperCol和labelCol問(wèn)題詳解
最近學(xué)習(xí)中遇到了些問(wèn)題,所以給大家總結(jié),下面這篇文章主要給大家介紹了關(guān)于antd中form表單的wrapperCol和labelCol問(wèn)題的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
react實(shí)現(xiàn)每隔60s刷新一次接口的示例代碼
本文主要介紹了react實(shí)現(xiàn)每隔60s刷新一次接口的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06