React通过redux-persist持久化数据存储

sf_wangchong 发布于2019-08-23 15:12 / 3604人阅读

摘要：首先我们想到的就是，是没有时间限制的数据存储，我们可以通过它来实现数据的持久化存储。那么有没有结合来达到持久数据存储功能的框架呢当然，它就是。会将的中的数据缓存到浏览器的中。

在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(
            
                {/*网页内容*/}
            
        , document.getElementById("root"));

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

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

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

私有云云服务器持久化数据存储 k8s持久化存储方案 key value 分布式存储方案持久化数据持久化

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101670.html

react-redux初级教程，纯白话讲述redux数据、开发流程整理，redux数据持久化实现

摘要：日常项目直接使用是完全没有问题的，可是随着项目的日益壮大，组件数量的逐渐增长，组件之间的嵌套使得数据的管理越来越繁重。最后数据保存进了中的，页面也会根据的改变自动更新。以下文章均为个人近期所学心得，自学react、redux，逐渐找到自己的方向，现将自己的方向方式写出来，以供大家学习参考，肯定会有不足，欢迎批评指正。日常项目直接使用react是完全没有问题的，可是随着项目的日益壮大...

gclove 2019-08-23 10:50 评论0 收藏0
和我一起入坑-React-Native-加入Redux的TodoList

摘要：之前写了一篇没有加入的的小博文。一拆分结构根据自己的习惯和固定套路，拆分目录结构和组件结构。把的导航组件集中放在纯粹是个人习惯。二代码实现入口文件是用来做的数据持久化。添加事项后要通知其他组件更新数据。读前须知这个项目是第一次使用Redux的实例，并不具有专业性的理论知识。纯粹分享一次开发过程与心得。之前写了一篇没有加入Redux的React Native ToDoList的小博文...

LucasTwilight 2019-08-23 12:03 评论0 收藏0
react-native, react-navigation, redux 学习笔记

摘要：的使用用户发出函数算出新的重新渲染三大原则单一数据源，利用的形式向下传播数据流决定只读，通过修改通过纯函数来修改组件状态，是描述动作的纯函数连接和基于全局的，选择我们要注入的不同的组件分开把注入，读取方法三剑客先确定一下初始状 redux的使用 react-native, react, react-redux, react-navigaition, redux-thunk, redu...

妤锋シ 2019-08-20 17:47 评论0 收藏0
初识React(9)：dva简介

摘要：初始值，优先级低于传给的，如下此时，在后为以格式定义。用于处理同步操作，唯一可以修改的地方。由触发，可以触发，可以和服务器交互，可以获取全局的数据等等。取消注册，清理和。如果没有返回函数，使用会给予警告注册路由表。前言 dva 首先是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以...

keke 2019-08-23 14:08 评论0 收藏0