詳解在React-Native中持久化redux數(shù)據(jù)
在最近的一個項目中,要求對 redux 數(shù)據(jù)做持久化處理,經過研究后成功實現(xiàn),在此記錄一下過程
我們可以使用 redux-persist 對數(shù)據(jù)做持久化處理
安裝
npm i --save redux-persist
使用
安裝成功后,我們需要對 store 代碼進行修改,這是我的 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', # 對于數(shù)據(jù) key 的定義
storage, # 選擇的存儲引擎
}
# 對 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 中,存儲引擎默認為 AsyncStorage
Android是以key=>value的形式存儲在本地sqlite中
iOS 是直接存沙盒文件
其中還有很多可以配置的地方,大家自行參考官方文檔
修改完生成 store 代碼后,在入口文件做一次修改,需要引入 PersistGate 來進行二次的組裝
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
簡單配置即可,我們可以看一下效果
效果

參考文檔
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
一文搞懂?React?18?中的?useTransition()?與?useDeferredValue()
這篇文章主要介紹了一文搞懂?React?18?中的?useTransition()與useDeferredValue(),文章圍繞主題展開詳細的內容介紹,具有一定的參考價值,需要的小伙伴可以參考一下2022-09-09
React如何使用sortablejs實現(xiàn)拖拽排序
這篇文章主要介紹了React如何使用sortablejs實現(xiàn)拖拽排序問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-01-01
簡析React Native startReactApplication 方法
這篇文章主要介紹了React Native startReactApplication 方法簡析,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-09-09
基于react hooks,zarm組件庫配置開發(fā)h5表單頁面的實例代碼
這篇文章主要介紹了基于react hooks,zarm組件庫配置開發(fā)h5表單頁面,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-04-04

