详解在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

简单配置即可，我们可以看一下效果

效果

参考文档

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。