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

说明：

• 一般在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';
// import storageSession from 'redux-persist/lib/storage/session';

import { reducer as headerReducer } from '@/common/header/store';
import { reducer as menuReducer } from '@/common/menu/store';
import { reducer as footerReducer } from '@/common/footer/store';
import { reducer as log