詳解在React-Native中持久化redux數(shù)據(jù)
更新時(shí)間：2019年05月22日 09:01:10 作者：enda
這篇文章主要介紹了在React-Native中持久化redux數(shù)據(jù)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
在最近的一個(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)文章
這篇文章主要介紹了redux工作原理講解及使用方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2021-11-11
一文搞懂?React?18?中的?useTransition()?與?useDeferredValue()
這篇文章主要介紹了一文搞懂?React?18?中的?useTransition()與useDeferredValue()，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-09-09
本章深入探討了React?Ref的用法和原理,還介紹了如何使用useImperativeHandle在函數(shù)組件中暴露方法,并詳細(xì)解釋了ref的處理邏輯和原理,包括在commit階段更新ref以及在組件卸載時(shí)的處理,感興趣的朋友一起看看吧2025-01-01
React如何使用sortablejs實(shí)現(xiàn)拖拽排序
這篇文章主要介紹了React如何使用sortablejs實(shí)現(xiàn)拖拽排序問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
簡(jiǎn)析React Native startReactApplication 方法
這篇文章主要介紹了React Native startReactApplication 方法簡(jiǎn)析,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-09-09
這篇文章主要介紹了React?如何向url中添加參數(shù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
本篇文章主要介紹了ReactJs設(shè)置css樣式的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
基于react hooks,zarm組件庫(kù)配置開(kāi)發(fā)h5表單頁(yè)面的實(shí)例代碼
這篇文章主要介紹了基于react hooks,zarm組件庫(kù)配置開(kāi)發(fā)h5表單頁(yè)面,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-04-04
ReactJS應(yīng)用程序中設(shè)置Axios攔截器方法demo
這篇文章主要為大家介紹了ReactJS應(yīng)用程序中設(shè)置Axios攔截器方法demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
props是組件（包括函數(shù)組件和class組件）間的內(nèi)置屬性，用其可以傳遞數(shù)據(jù)給子節(jié)點(diǎn)，props用來(lái)傳遞參數(shù)。組件實(shí)例化過(guò)程中，你可以向其中傳遞一個(gè)參數(shù)，這個(gè)參數(shù)會(huì)在實(shí)例化過(guò)程中被引用2022-09-09