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

在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缓存数据

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

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

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

    在React项目中,我们经常会通过redux以及react-redux来存储和管理全局数据.但是通过redux存储全局数据时,会有这么一个问题,如果用户刷新了网页,那么我们通过redux存储的全局数据就会被全部清空,比如登录信息等. 这个时候,我们就会有全局数据持久化存储的需求.首先我们想到的就是localStorage,localStorage是没有时间限制的数据存储,我们可以通过它来实现数据的持久化存储. 但是在我们已经使用redux来管理和存储全局数据的基础上,再去使用localStora

  • Python使用shelve模块实现简单数据存储的方法

    本文实例讲述了Python使用shelve模块实现简单数据存储的方法.分享给大家供大家参考.具体分析如下: Python的shelve模块提供了一种简单的数据存储方案,以dict(字典)的形式来操作数据. #!/usr/bin/python import sys, shelve def store_person(db): """ Query user for data and store it in the shelf object """ pi

  • Android使用文件进行数据存储的方法

    本文实例讲述了Android使用文件进行数据存储的方法.分享给大家供大家参考.具体如下: 很多时候我们开发的软件需要对处理后的数据进行存储,以供再次访问.Android为数据存储提供了如下几种方式: 文件 SharedPreferences(参数) SQLite数据库 内容提供者(Content provider) 网络 首先给大家介绍使用文件如何对数据进行存储 Activity提供了openFileOutput()方法可以用于把数据输出到文件中,具体的实现过程与在J2SE环境中保存数据到文件中

  • 在react中使用vue的状态管理的方法示例

    我是要介绍一个新的 react 全局共享状态管理器,它和 vue 组件的状态管理一起同工之妙. 马上体验 在 react 状态管理领域,react-redux 可谓是只手遮天了,基于 flux 思想实现,小巧,immutable 的思想让数据变化可控.但 immutable 所带来的编程代价太大了,如果你要更新一个深层结构的对象的某个节点,写作将会是极其麻烦的一件事,而且还保不准会出错.为了保证 immutable,redux 的 reducer 机制让开发者掉光了头发.于是有了类似 dva.r

  • Django结合使用Scrapy爬取数据入库的方法示例

    Django结合使用Scrapy爬取数据入库的方法示例

    在django项目根目录位置创建scrapy项目,django_12是django项目,ABCkg是scrapy爬虫项目,app1是django的子应用 2.在Scrapy的settings.py中加入以下代码 import os import sys sys.path.append(os.path.dirname(os.path.abspath('.'))) os.environ['DJANGO_SETTINGS_MODULE'] = 'django_12.settings' # 项目名.se

  • AngularJS实现自定义指令与控制器数据交互的方法示例

    本文实例讲述了AngularJS实现自定义指令与控制器数据交互的方法.分享给大家供大家参考,具体如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>AngularJS自定义指令与控制器数据交互</title> <!-- <script src="http://cdn.bootcss.com/angular.js/1.3

  • vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】

    本文实例讲述了vue自定义键盘信息.监听数据变化的方法.分享给大家供大家参考,具体如下: @keydown.up @keydown.enter @keydown.a/b/c.... 自定义键盘信息: Vue.directive('on').keyCodes.ctrl=17; Vue.directive('on').keyCodes.myenter=13; @keydown.a/b/c.... <input type="text" @keydown.c="show&quo

  • react router4+redux实现路由权限控制的方法

    总体概述 一个完善的路由系统应该是这样子的,当链接到的组件是需要登录后才能查看,要能够跳转到登录页,然后登录成功后又跳回来之前想访问的页面.这里主要是用一个权限控制类来定义路由路由信息,同时用redux把登录成功后要访问的路由地址给保存起来,登录成功时看redux里面有没有存地址,如果没有存地址就跳转到默认路由地址. 路由权限控制类 在这个方法里面,通过sessionStorage判断是否登录了,如果没有登录,就保存一下当前想要跳转的路由到redux里面.然后跳转到我们登录页. import R

  • Vue.js上传图片到阿里云OSS存储的方法示例

    如何在VueJS使用阿里云存储上传图片? 什么是OSS呢? 其实按照官网的解释就是->>阿里云对象存储服务(Object Storage Service) 在实际开发中,公司可能会用到OSS随时来存储一些数据,比如像文本.图片.音频和视频等在内的各种非结构化数据文件,恰好,在做项目的时候,刚好用到了OSS存储,对于我这个萌新,从来没用过,那么我们先来看看文档,看看是怎么一回事~看看前端在VueJS的环境下是如何上传OSS的 (1)首先,打开官网-----https://www.aliyun.c

  • TensorFlow数据输入的方法示例

    TensorFlow数据输入的方法示例

    读取数据(Reading data) TensorFlow输入数据的方式有四种: tf.data API:可以很容易的构建一个复杂的输入通道(pipeline)(首选数据输入方式)(Eager模式必须使用该API来构建输入通道) Feeding:使用Python代码提供数据,然后将数据feeding到计算图中. QueueRunner:基于队列的输入通道(在计算图计算前从队列中读取数据) Preloaded data:用一个constant常量将数据集加载到计算图中(主要用于小数据集) 1. t

随机推荐