详解在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 相关文章推荐
jquery 经典动画菜单效果代码
Jan 26 Javascript
关于javascript DOM事件模型的两件事
Jul 22 Javascript
JavaScript框架(iframe)操作总结
Apr 16 Javascript
简介JavaScript中的unshift()方法的使用
Jun 09 Javascript
全面解析Bootstrap手风琴效果
Apr 17 Javascript
JavaScript判断数组是否存在key的简单实例
Aug 03 Javascript
微信小程序开发之相册选择和拍照详解及实例代码
Feb 22 Javascript
react开发中如何使用require.ensure加载es6风格的组件
May 09 Javascript
JavaScript基于面向对象实现的猜拳游戏
Jan 03 Javascript
解决vue.js 数据渲染成功仍报错的问题
Aug 25 Javascript
JS实现简单tab选项卡切换
Oct 25 Javascript
使用node.JS中的url模块解析URL信息
Feb 06 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
一致性哈希算法以及其PHP实现详细解析
2013/08/24 PHP
静态html文件执行php语句的方法(推荐)
2016/11/21 PHP
JS Timing
2007/04/21 Javascript
Packer 3.0 JS压缩及混淆工具 下载
2007/05/03 Javascript
Mootools 1.2教程 正则表达式
2009/09/15 Javascript
JavaScript全局函数使用简单说明
2011/03/11 Javascript
基于jquery实现的一个选择中国大学的弹框 (数据、步骤、代码)
2012/07/26 Javascript
jQuery表格插件ParamQuery简单使用方法示例
2013/12/05 Javascript
jQuery添加/改变/移除CSS类及判断是否已经存在CSS
2014/08/20 Javascript
JavaScript字符串对象slice方法入门实例(用于字符串截取)
2014/10/16 Javascript
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”
2015/03/05 Javascript
javascript实现平滑无缝滚动
2020/08/09 Javascript
玩转JavaScript OOP - 类的实现详解
2016/06/08 Javascript
jQuery stop()用法实例详解
2016/07/28 Javascript
Bootstrap基本模板的使用和理解1
2016/12/14 Javascript
详解angular2实现ng2-router 路由和嵌套路由
2017/03/24 Javascript
javascript ES6 新增了let命令使用介绍
2017/07/07 Javascript
js图片上传的封装代码
2017/08/01 Javascript
详解angular笔记路由之angular-router
2017/09/12 Javascript
webpack+vue-cli项目中引入外部非模块格式js的方法
2018/09/28 Javascript
详解Vue中组件传值的多重实现方式
2019/08/16 Javascript
layui原生表单验证的实例
2019/09/09 Javascript
Python实现SMTP发送邮件详细教程
2021/03/02 Python
解决python字典对值(值为列表)赋值出现重复的问题
2019/01/20 Python
Python利用逻辑回归模型解决MNIST手写数字识别问题详解
2020/01/14 Python
如何基于python实现归一化处理
2020/01/20 Python
Python 用__new__方法实现单例的操作
2020/12/11 Python
详解CSS3 弹性布局快速入门
2019/06/06 HTML / CSS
CSS3 rgb and rgba(透明色)的使用详解
2020/09/25 HTML / CSS
英国时尚泳装品牌:Maru Swimwear
2019/10/06 全球购物
微笑服务演讲稿
2014/05/13 职场文书
暑期培训班招生方案
2014/08/26 职场文书
2014银行领导班子四风对照检查材料思想汇报
2014/09/25 职场文书
2015少先队大队辅导员工作总结
2015/07/24 职场文书
CSS三大特性继承性、层叠性和优先级详解
2022/01/18 HTML / CSS
电脑关机速度很慢怎么办 提升电脑关机速度设置教程
2022/04/08 数码科技