React通过redux-persist持久化数据存储的方法示例


Posted in Javascript onFebruary 14, 2019

在React项目中,我们经常会通过redux以及react-redux来存储和管理全局数据。但是通过redux存储全局数据时,会有这么一个问题,如果用户刷新了网页,那么我们通过redux存储的全局数据就会被全部清空,比如登录信息等。

这个时候,我们就会有全局数据持久化存储的需求。首先我们想到的就是localStorage,localStorage是没有时间限制的数据存储,我们可以通过它来实现数据的持久化存储。

但是在我们已经使用redux来管理和存储全局数据的基础上,再去使用localStorage来读写数据,这样不仅是工作量巨大,还容易出错。那么有没有结合redux来达到持久数据存储功能的框架呢?当然,它就是redux-persist。redux-persist会将redux的store中的数据缓存到浏览器的localStorage中。

redux-persist的使用

1、对于reducer和action的处理不变,只需修改store的生成代码,修改如下

import {createStore} from 'redux'
import reducers from '../reducers/index'
import {persistStore, persistReducer} from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import autoMergeLevel2 from 'redux-persist/lib/stateReconciler/autoMergeLevel2';

const persistConfig = {
 key: 'root',
 storage: storage,
 stateReconciler: autoMergeLevel2 // 查看 'Merge Process' 部分的具体情况
};

const myPersistReducer = persistReducer(persistConfig, reducers)

const store = createStore(myPersistReducer)

export const persistor = persistStore(store)
export default store

2、在index.js中,将PersistGate标签作为网页内容的父标签

import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux'
import store from './redux/store/store'
import {persistor} from './redux/store/store'
import {PersistGate} from 'redux-persist/lib/integration/react';

ReactDOM.render(<Provider store={store}>
   <PersistGate loading={null} persistor={persistor}>
    {/*网页内容*/}
   </PersistGate>
  </Provider>, document.getElementById('root'));

这就完成了通过redux-persist实现React持久化本地数据存储的简单应用

3、最后我们调试查看浏览器中的localStorage缓存数据

React通过redux-persist持久化数据存储的方法示例

发现数据已经存储到了localStorage中,此时刷新网页,redux中的数据也不会丢失

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

Javascript 相关文章推荐
JS中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)
Nov 03 Javascript
当鼠标滑过文本框自动选中输入框内容的JS代码分享
Nov 26 Javascript
JS图片无缝、平滑滚动代码
Mar 11 Javascript
wap手机图片滑动切换特效无css3元素js脚本编写
Jul 28 Javascript
jQuery表单域属性过滤器用法分析
Feb 10 Javascript
jquery获取及设置outerhtml的方法
Mar 09 Javascript
使用JQuery 加载页面时调用JS的实现方法
May 30 Javascript
JS实现的添加弹出层并完成锁屏操作示例
Apr 07 Javascript
javascript与PHP动态往类中添加方法对比
Mar 21 Javascript
Vue源码分析之Vue实例初始化详解
Aug 25 Javascript
如何解决jQuery 和其他JS库的冲突
Jun 22 jQuery
一文读懂vue动态属性数据绑定(v-bind指令)
Jul 20 Javascript
微信小程序实现简易table表格
Jun 19 #Javascript
微信小程序制作表格的方法
Feb 14 #Javascript
手把手带你封装一个vue component第三方库
Feb 14 #Javascript
微信小程序实现简单表格
Feb 14 #Javascript
手挽手带你学React之React-router4.x的使用
Feb 14 #Javascript
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 #jQuery
vue中各种通信传值方式总结
Feb 14 #Javascript
You might like
php下将多个数组合并成一个数组的方法与实例代码
2011/02/03 PHP
PHP--用万网的接口实现域名查询功能
2012/12/13 PHP
php缩放gif和png图透明背景变成黑色的解决方法
2014/10/14 PHP
php+jQuery+Ajax实现点赞效果的方法(附源码下载)
2020/07/21 PHP
学习PHP的数组总结【经验】
2016/05/05 PHP
eclipse php wamp配置教程
2016/06/30 PHP
PHP安装GeoIP扩展根据IP获取地理位置及计算距离的方法
2016/07/01 PHP
JS可以控制样式的名称写法一览
2014/01/16 Javascript
吐槽一下我所了解的Node.js
2014/10/08 Javascript
关于AngularJs数据的本地存储详解
2017/01/20 Javascript
Vue异步加载about组件
2017/10/31 Javascript
vue实现提示保存后退出的方法
2018/03/15 Javascript
详解Vue CLI 3.0脚手架如何mock数据
2018/11/23 Javascript
基于vue实现移动端圆形旋钮插件效果
2018/11/28 Javascript
解决vue-pdf查看pdf文件及打印乱码的问题
2020/11/04 Javascript
玩转python爬虫之cookie使用方法
2016/02/17 Python
Python合并多个Excel数据的方法
2018/07/16 Python
在python中实现对list求和及求积
2018/11/14 Python
python利用requests库模拟post请求时json的使用教程
2018/12/07 Python
利用pyinstaller打包exe文件的基本教程
2019/05/02 Python
python单例模式原理与创建方法实例分析
2019/10/26 Python
python Gabor滤波器讲解
2020/10/26 Python
使用canvas绘制超炫时钟
2014/12/17 HTML / CSS
美国卡车、吉普车和SUV零件网站:4 Wheel Parts
2016/11/24 全球购物
美国婚礼礼品网站:MyWeddingFavors
2018/09/26 全球购物
加拿大国民体育购物网站:National Sports
2018/11/04 全球购物
Servlet面试题库
2015/07/18 面试题
大四毕业生学习总结的自我评价
2013/10/31 职场文书
医学专业大学生求职的自我评价
2013/11/27 职场文书
毕业自荐信
2013/12/16 职场文书
交通安全演讲稿
2014/01/07 职场文书
师范学院教师自荐书
2014/01/31 职场文书
珍珠鸟教学反思
2014/02/01 职场文书
2019新员工心得体会
2019/06/25 职场文书
2019关于实习生工作安排及待遇的管理方案!
2019/07/16 职场文书
Python如何利用正则表达式爬取网页信息及图片
2021/04/17 Python