详解在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读取ASP设定的COOKIE
Feb 15 Javascript
JavaScript iframe的相互操作浅析
Oct 14 Javascript
jquery each的几种常用的使用方法示例
Jan 21 Javascript
jQuery层级选择器用法分析
Feb 10 Javascript
JavaScript中匿名函数用法实例
Mar 23 Javascript
JS基于面向对象实现的放烟花效果
May 07 Javascript
瀑布流的实现方式(原生js+jquery+css3)
Jun 28 Javascript
谈谈对JavaScript原生拖放的深入理解
Sep 20 Javascript
html、css和jquery相结合实现简单的进度条效果实例代码
Oct 24 Javascript
JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
Jan 03 Javascript
让网站自动生成章节目录索引的多个js代码
Jan 07 Javascript
vue项目从node8.x升级到12.x后的问题解决
Oct 25 Javascript
微信小程序的注册页面包含倒计时验证码、获取用户信息
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
根德YB400的电路分析
2021/03/02 无线电
用PHP的ob_start();控制您的浏览器cache!
2006/11/25 PHP
php获取当前时间的毫秒数的方法
2014/01/26 PHP
PHP实现扎金花游戏之大小比赛的方法
2015/03/10 PHP
使用jQuery的ajax功能实现的RSS Reader 代码
2009/09/03 Javascript
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
2010/05/06 Javascript
基于jQuery的弹出警告对话框美化插件(警告,确认和提示)
2010/06/10 Javascript
在IE和VB中支持png图片透明效果的实现方法(vb源码打包)
2011/04/01 Javascript
为JavaScript类型增加方法的实现代码(增加功能)
2011/12/29 Javascript
node.js 一个简单的页面输出实现代码
2012/03/07 Javascript
使用CSS和jQuery模拟select并附提交后取得数据的代码
2013/10/18 Javascript
javascript函数定义的几种区别小结
2014/01/06 Javascript
jquery操作select详解(取值,设置选中)
2014/02/07 Javascript
一个CSS+jQuery实现的放大缩小动画效果
2014/02/19 Javascript
火狐下input焦点无法重复获取问题的解决方法
2014/06/16 Javascript
JavaScript中跨域调用Flash的方法
2014/08/11 Javascript
JavaScript中的值是按值传递还是按引用传递问题探讨
2015/01/30 Javascript
极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg
2016/05/27 Javascript
又一枚精彩的弹幕效果jQuery实现
2016/07/25 Javascript
JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome
2017/01/05 Javascript
微信小程序之电影影评小程序制作代码
2017/08/03 Javascript
js中call()和apply()改变指针问题的讲解
2019/01/17 Javascript
Vue 前端实现登陆拦截及axios 拦截器的使用
2019/07/17 Javascript
python 实现对文件夹内的文件排序编号
2018/04/12 Python
pytorch构建网络模型的4种方法
2018/04/13 Python
Python字典常见操作实例小结【定义、添加、删除、遍历】
2019/10/25 Python
pandas按照列的值排序(某一列或者多列)
2020/12/13 Python
德国百年厨具品牌WMF美国站:WMF美国
2016/09/12 全球购物
Magee 1866官网:Donegal粗花呢外套和大衣专家
2019/11/01 全球购物
村干部培训方案
2014/05/02 职场文书
鉴定评语大全
2014/05/05 职场文书
工作说明书范文
2014/05/07 职场文书
大专学生求职信
2014/07/04 职场文书
党的群众路线教育实践活动个人整改落实情况汇报
2014/10/28 职场文书
2014年服务员工作总结
2014/11/18 职场文书
pytorch DataLoader的num_workers参数与设置大小详解
2021/05/28 Python