在 React-Native 中持久化 redux 資料

Enda發表於2019-06-06
React持久化Redux

在最近的一個專案中，要求對 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

簡單配置即可，我們可以看一下效果

圖片描述

  1. 官方文件
本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章