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 文本滚动效果的实例代码
Aug 17 Javascript
JavaScript 32位整型无符号操作示例
Dec 08 Javascript
Extjs中RowExpander控件的默认展开问题示例探讨
Jan 24 Javascript
怎么判断js脚本加载完成
Feb 28 Javascript
javascript cookie基础应用之记录用户名的方法
Sep 20 Javascript
vue router-link传参以及参数的使用实例
Nov 10 Javascript
bootstrap treeview 扩展addNode方法动态添加子节点的方法
Nov 21 Javascript
Angular2 父子组件通信方式的示例
Jan 29 Javascript
JavaScript的级联函数用法简单示例【链式调用】
Mar 26 Javascript
微信小程序基于高德地图查找位置并显示文字
Oct 30 Javascript
如何在postman中添加cookie信息步骤解析
Jun 30 Javascript
JavaScript经典案例之简易计算器
Aug 24 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 使用post,get的一种简洁方式
2010/04/25 PHP
PHP使用curl_multi_select解决curl_multi网页假死问题的方法
2018/08/15 PHP
用PHP的反射实现委托模式的讲解
2019/03/22 PHP
PHP调用QQ互联接口实现QQ登录网站功能示例
2019/10/24 PHP
jquery $(document).ready() 与window.onload的区别
2009/12/28 Javascript
Jquery调用webService远程访问出错的解决方法
2010/05/21 Javascript
JQuery之拖拽插件实现代码
2011/04/14 Javascript
js中 javascript:void(0) 用法详解
2015/08/11 Javascript
jquery的幻灯片图片切换效果代码分享
2015/09/07 Javascript
js实现无限级树形导航列表效果代码
2015/09/23 Javascript
JS实现简单的右下角弹出提示窗口完整实例
2016/06/21 Javascript
javascript中this关键字详解
2016/12/12 Javascript
js实现定时进度条完成后切换图片
2017/01/04 Javascript
RequireJs的使用详解
2017/02/19 Javascript
nodejs入门教程一:概念与用法简介
2017/04/24 NodeJs
微信小程序之购物车功能
2020/09/23 Javascript
JavaScript之Date_动力节点Java学院整理
2017/06/28 Javascript
javascript实现文字无缝滚动效果
2017/08/26 Javascript
vue实现模态框的通用写法推荐
2018/02/26 Javascript
vue-cli监听组件加载完成的方法
2018/09/07 Javascript
JavaScript十大取整方法实例教程
2020/12/03 Javascript
[03:00]2018完美盛典_最佳英雄奖
2018/12/17 DOTA
深入flask之异步非堵塞实现代码示例
2018/07/31 Python
Python基于Opencv来快速实现人脸识别过程详解(完整版)
2019/07/11 Python
python数据预处理 :数据共线性处理详解
2020/02/24 Python
基于Python3读写INI配置文件过程解析
2020/07/23 Python
英国领先的汽车轮胎和快速健康中心:Kwik Fit
2017/10/29 全球购物
Shopty西班牙:缝纫机在线销售
2018/01/26 全球购物
澳大利亚婴儿、幼儿和儿童在线设计师商店:Smooch Baby
2019/02/16 全球购物
网页设计个人找工作求职信
2013/11/28 职场文书
历史专业个人求职信分享
2013/12/20 职场文书
实习心得体会
2014/01/02 职场文书
2014年酒店年度工作总结
2014/12/10 职场文书
小学家长通知书评语
2014/12/31 职场文书
mysql 联合索引生效的条件及索引失效的条件
2021/11/20 MySQL
vue.js 使用原生js实现轮播图
2022/04/26 Vue.js