详解在React-Native中持久化redux数据


Posted in Javascript onMay 22, 2019

在最近的一个项目中,要求对 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数据

参考文档

官方文档

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 写类方式之三
Jul 05 Javascript
js中日期的加减法
May 06 Javascript
jquery实现兼容IE8的异步上传文件
Jun 15 Javascript
谈谈javascript中使用连等赋值操作带来的问题
Nov 26 Javascript
Angular.js中用ng-repeat-start实现自定义显示
Oct 18 Javascript
Vue.js常用指令汇总(v-if、v-for等)
Nov 03 Javascript
简单谈谈Javascript函数中的arguments
Feb 09 Javascript
微信小程序tabBar用法实例详解
Dec 04 Javascript
jQuery实现获取动态添加的标签对象示例
Jun 28 jQuery
axios携带cookie配置详解(axios+koa)
Dec 28 Javascript
微信小程序实现传递多个参数与事件处理
Aug 12 Javascript
原生JS封装vue Tab切换效果
Apr 28 Vue.js
微信小程序的注册页面包含倒计时验证码、获取用户信息
May 22 #Javascript
JavaScript函数式编程(Functional Programming)纯函数用法分析
May 22 #Javascript
jQuery Migrate 插件用法实例详解
May 22 #jQuery
自定义Vue组件打包、发布到npm及使用教程
May 22 #Javascript
Vue中的组件及路由使用实例代码详解
May 22 #Javascript
Vue侦测相关api的实现方法
May 22 #Javascript
一文快速详解前端框架 Vue 最强大的功能
May 21 #Javascript
You might like
php利用cookies实现购物车的方法
2014/12/10 PHP
PHP用户验证和标签推荐的简单使用
2016/10/31 PHP
PHP实现的一致性Hash算法详解【分布式算法】
2018/03/31 PHP
JavaScript中使用Substring删除字符串最后一个字符
2013/11/03 Javascript
js post提交调用方法
2014/02/12 Javascript
Javascript中3种实现继承的方法和代码实例
2014/08/12 Javascript
Jquery Ajax xmlhttp请求成功问题
2015/02/04 Javascript
javaScript实现可缩放的显示区效果代码
2015/10/26 Javascript
JS原型对象的创建方法详解
2016/06/16 Javascript
jQuery EasyUI Tab 选项卡问题小结
2016/08/16 Javascript
jQuery实现鼠标跟随效果
2017/02/20 Javascript
vue实现app页面切换动画效果实例
2017/05/23 Javascript
underscore之Collections_动力节点Java学院整理
2017/07/10 Javascript
JavaScript面向对象精要(下部)
2017/09/12 Javascript
node.js的exports、module.exports与ES6的export、export default深入详解
2017/10/26 Javascript
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
2017/12/12 Javascript
node+koa2+mysql+bootstrap搭建一个前端论坛
2018/05/06 Javascript
[03:17]DOTA2英雄基础教程 剧毒术士
2013/12/12 DOTA
[02:57]2014DOTA2国际邀请赛 选手辛苦解说更辛苦
2014/07/10 DOTA
[43:24]VG vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python实现上传样本到virustotal并查询扫描信息的方法
2014/10/05 Python
决策树的python实现方法
2014/11/18 Python
讲解Python中if语句的嵌套用法
2015/05/14 Python
Python实现定时任务
2017/02/08 Python
基于Python执行dos命令并获取输出的结果
2019/12/30 Python
python修改linux中文件(文件夹)的权限属性操作
2020/03/05 Python
Python项目实战之使用Django框架实现支付宝付款功能
2021/02/23 Python
Veronica Beard官网:在酷、经典和别致之间找到了平衡
2018/01/11 全球购物
趣天网日本站:Qoo10 JP
2019/09/18 全球购物
武汉高蓝德国际.net机试
2016/06/24 面试题
北京天润融通.net面试题笔试题
2012/02/20 面试题
社会保险接收函
2014/01/12 职场文书
战友聚会邀请函
2014/01/18 职场文书
商务英语广告词大全
2014/03/18 职场文书
党章培训心得体会
2014/09/04 职场文书
MySQL优化之慢日志查询
2022/06/10 MySQL