(十一)学习笔记--redux-persist持久化数据存储+中间件封装

Augustine_Cyq

于 2020-06-09 19:13:54 发布

阅读量1.7k

点赞数

分类专栏： 2020年学习笔记

本文链接：https://blog.csdn.net/Augustine_Cyq/article/details/106648324

版权

这篇博客介绍了如何在React项目中利用redux-persist进行数据持久化存储，避免页面刷新后redux数据丢失。详细步骤包括下载库、配置reducer和store、在App.js中使用PersistGate组件，以及解决问题的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

说明：

一般在react项目中，我们通过redux和react-redux来存储和管理数据，但是使用redux存储数据时，会有一个问题，如果用户刷新了页面，那么通过redux存储的全局数据就会被重置，比如登录状态等。
这个时候有没有解决办法呢？答案肯定是有的：
一般我们可以使用sessionStorage或者localStorage来达到数据存储的要求，但既然我们使用了redux来管理和存储全局数据，如果再使用sessionStorage或者localStorage来读写数据，这样就增大了工作量和代码冗余。
这个时候，redux-persist
满足你的需求，它结合redux，将store中的数据缓存到浏览器的sessionStorage或者localStorage中。

redux-persist 使用如下(当前使用最新版本 redux-persist ^6.0.0)

1.下载

yarn add redux-persist

2.reducer.js配置

import { combineReducers } from 'redux';
import { persistReducer } from 'redux-persist';
/* 存储机制 */
import storage from 'redux-persist/lib/storage';
// impo