詳解在React-Native中持久化redux數(shù)據(jù)
在最近的一個項目中,要求對 redux 數(shù)據(jù)做持久化處理,經(jīng)過研究后成功實現(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?antd中setFieldsValu的簡便使用示例代碼
form.setFieldsValue是antd?Form組件中的一個方法,用于動態(tài)設置表單字段的值,它接受一個對象作為參數(shù),對象的鍵是表單字段的名稱,值是要設置的字段值,這篇文章主要介紹了React?antd中setFieldsValu的簡便使用,需要的朋友可以參考下2023-08-08使用react在修改state中的數(shù)組和對象數(shù)據(jù)的時候(setState)
這篇文章主要介紹了使用react在修改state中的數(shù)組和對象數(shù)據(jù)的時候(setState),具有很好的參考價值,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-09-09React 無狀態(tài)組件(Stateless Component) 與高階組件
這篇文章主要介紹了React 無狀態(tài)組件(Stateless Component) 與高階組件,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-08-08react?路由權限動態(tài)菜單方案配置react-router-auth-plus
這篇文章主要為大家介紹了react路由權限動態(tài)菜單方案react-router-auth-plus傻瓜式配置詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-08-08React在Dva項目中創(chuàng)建并引用頁面局部組件的方式
這篇文章主要介紹了React在Dva項目中創(chuàng)建并引用頁面局部組件的方式,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-07-07antd中form表單的wrapperCol和labelCol問題詳解
最近學習中遇到了些問題,所以給大家總結,下面這篇文章主要給大家介紹了關于antd中form表單的wrapperCol和labelCol問題的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-02-02