在 React-Native 中持久化 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

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_3406