推荐设备MORE

html 网页模板

html 网页模板

疑难问题

四种常见小程序_详解在React

日期:2021-01-07
我要分享
详解在React-Native中持久化redux数据       这篇文章主要介绍了在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)

# 处理后的 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' # 看这里