详解在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 特殊字符串
Feb 25 Javascript
Chrome中JSON.parse的特殊实现
Jan 12 Javascript
js判断undefined类型,undefined,null, 的区别详细解析
Dec 16 Javascript
JavaScript禁止页面操作的示例代码
Dec 17 Javascript
Javascript实现跑马灯效果的简单实例
May 31 Javascript
jQuery实现弹幕效果
Feb 17 Javascript
jQuery复合事件结合toggle()方法的用法示例
Jun 10 jQuery
VUE中使用Vue-resource完成交互
Jul 21 Javascript
bootstrap tooltips在 angularJS中的使用方法
Apr 10 Javascript
微信小程序通过一个json实现分享朋友圈图片
Sep 03 Javascript
layui 对弹窗 form表单赋值的实现方法
Sep 04 Javascript
JavaScript中this的学习笔记及用法整理
Feb 17 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中利用str_pad函数生成数字递增形式的产品编号
2013/09/30 PHP
php mail to 配置详解
2014/01/16 PHP
codeigniter数据库操作函数汇总
2014/06/12 PHP
laravel 4安装及入门图文教程
2014/10/29 PHP
PHP magento后台无法登录问题解决方法
2016/11/24 PHP
PHP实现git部署的方法教程
2017/12/19 PHP
读jQuery之六 缓存数据功能介绍
2011/06/21 Javascript
DOM基础教程之事件对象
2015/01/20 Javascript
JavaScript中的条件判断语句使用详解
2015/06/03 Javascript
jQuery实现类似标签风格的导航菜单效果代码
2015/08/25 Javascript
Node.js dgram模块实现UDP通信示例代码
2017/09/26 Javascript
Vue Element 分组+多选+可搜索Select选择器实现示例
2018/07/23 Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
2019/08/07 Javascript
JQuery省市联动效果实现过程详解
2020/05/08 jQuery
Python实现类继承实例
2014/07/04 Python
Python中实现对list做减法操作介绍
2015/01/09 Python
python实现音乐下载的统计
2018/06/20 Python
Python返回数组/List长度的实例
2018/06/23 Python
用Python解决x的n次方问题
2019/02/08 Python
python用requests实现http请求代码实例
2019/10/31 Python
Python paramiko 模块浅谈与SSH主要功能模拟解析
2020/02/29 Python
python使用pyecharts库画地图数据可视化的实现
2020/03/25 Python
django 扩展user用户字段inlines方式
2020/03/30 Python
python实现跨年表白神器--你值得拥有
2021/01/04 Python
html5是什么_动力节点Java学院整理
2017/07/07 HTML / CSS
小露珠教学反思
2014/04/30 职场文书
暑期社会实践心得体会
2014/09/02 职场文书
党的群众路线整改落实情况汇报
2014/10/28 职场文书
毕业论文致谢格式模板
2015/05/14 职场文书
上级领导检查欢迎词
2015/09/30 职场文书
2016党员党课心得体会
2016/01/07 职场文书
小学教代会开幕词
2016/03/04 职场文书
2019年大学生学年自我鉴定!
2019/03/25 职场文书
浅谈react useEffect闭包的坑
2021/06/08 Javascript
Mybatis是这样防止sql注入的
2021/12/06 Java/Android
Win11怎么添加用户?Win11添加用户账户的方法
2022/07/15 数码科技