详解在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 相关文章推荐
浏览器无法运行JAVA脚本的解决方法
Jan 09 Javascript
自定义一个jquery插件[鼠标悬浮时候 出现说明label]
Jun 27 Javascript
基于jQuery判断两个元素是否有重叠部分的代码
Jul 25 Javascript
javascript 保存文件到本地实现方法
Nov 29 Javascript
Jquery:ajax实现翻页无刷新功能代码
Aug 05 Javascript
javascript 中that的含义示例介绍
May 14 Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
Apr 24 Javascript
jQuery简单获取键盘事件的方法
Jan 22 Javascript
JavaScript定义数组的三种方法(new Array(),new Array('x','y')
Oct 04 Javascript
vue-star评星组件开发实例
Mar 01 Javascript
JavaScript从原型到原型链深入理解
Jun 03 Javascript
小程序实现文字循环滚动动画
Jun 14 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使用DES进行加密与解密的方法详解
2013/06/06 PHP
php通过ksort()函数给关联数组按照键排序的方法
2015/03/18 PHP
smarty内部日期函数html_select_date()用法实例分析
2015/07/08 PHP
Zend Framework动作助手FlashMessenger用法详解
2016/03/05 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
2020/04/04 PHP
Prototype使用指南之hash.js
2007/01/10 Javascript
Google Map Api和GOOGLE Search Api整合实现代码
2009/07/18 Javascript
一个JavaScript变量声明的知识点
2013/10/28 Javascript
jquery中post方法用法实例
2014/10/21 Javascript
javascript实现方法调用与方法触发小结
2016/03/26 Javascript
JS本地刷新返回上一页代码
2016/07/25 Javascript
Highcharts+NodeJS搭建数据可视化平台示例
2017/01/01 NodeJs
详解AngularJS脏检查机制及$timeout的妙用
2017/06/19 Javascript
基于JavaScript实现弹幕特效
2020/08/27 Javascript
JS实现百度搜索接口及链接功能实例代码
2018/02/02 Javascript
Vue 菜单栏点击切换单个class(高亮)的方法
2018/08/22 Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
2019/11/29 Javascript
vue实现购物车加减
2020/05/30 Javascript
Javascript中Math.max和Math.max.apply的区别和用法详解
2020/08/24 Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
2020/09/22 Javascript
Python中模拟enum枚举类型的5种方法分享
2014/11/22 Python
Python生成随机密码
2015/03/10 Python
python开发之for循环操作实例详解
2015/11/12 Python
pandas 数据实现行间计算的方法
2018/06/08 Python
使用python求斐波那契数列中第n个数的值示例代码
2020/07/26 Python
CSS3的新特性介绍
2008/10/31 HTML / CSS
大唐电信科技股份有限公司java工程师面试经历
2016/12/09 面试题
银行会计职员个人的自我评价
2013/09/29 职场文书
服务标兵事迹材料
2014/05/04 职场文书
大学生毕业求职信
2014/06/12 职场文书
党的群众路线教育实践活动整改落实情况报告
2014/10/28 职场文书
2015年世界无车日活动总结
2015/03/23 职场文书
董事长年会致辞
2015/07/29 职场文书
Python排序算法之插入排序及其优化方案详解
2021/06/11 Python
VUE使用draggable实现组件拖拽
2022/04/06 Vue.js