詳解在React-Native中持久化redux數據

2024-05-06 16:51:12

字體：大中小

來源：轉載

供稿：網友

在最近的一個項目中，要求對 redux 數據做持久化處理，經過研究后成功實現，在此記錄一下過程

我們可以使用 redux-persist 對數據做持久化處理

安裝

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', # 對于數據 key 的定義 storage,  # 選擇的存儲引擎}# 對 reducers 的封裝處理const persistedReducer = persistReducer(persistConfig, reducers)let loggerMiddleware = createLogger();export default function configureStore() { const enhancers = compose(  applyMiddleware(thunk, loggerMiddleware), ); # 處理后的 reducers 需要作為參數傳遞在 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-Native,持久化,redux