解决redux数据刷新页面数据丢失问题（使用redux-persist持久化数据存储）

说明：

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

    import { createStore } from 'redux';
    import reducer from '../reducer';//引入deducer文件
    import {persistStore, persistReducer} from 'redux-persist';
    //  存储机制，可换成其他机制，当前使用sessionStorage机制
    import storageSession from 'redux-persist/lib/storage/session'
    // import storage from 'redux-persist/lib/storage'; //localStorage机制
    //import { AsyncStorage } from 'react-native'; //react-native
    // 数据对象
    const storageConfig = {
        key: 'root', // 必须有的
        storage:storageSession, // 缓存机制
        blacklist: ['name','age'] // reducer 里不持久化的数据,除此外均为持久化数据
    }
    或者
    const storageConfig = {
        key: 'root', // 必须有的
        storage:storageSession, // 缓存机制
        whitelist: ['name','age'] // reducer 里持久化的数据,除此外均为不持久化数据
    }
    const myPersistReducer = persistReducer(storageConfig, reducer)
    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 Router from './router';
import {Provider} from 'react-redux';
import {PersistGate} from 'redux-persist/lib/integration/react';
import configStore from './redux/store';
import {persistor} from './redux/store';

ReactDOM.render(
    <Provider store={configStore}>
        <PersistGate loading={null} persistor={persistor}>
            <Router/>
        </PersistGate>
    </Provider>,
    document.getElementById('root'));

这就完成了通过redux-persist实现redux持久化本地数据存储。

3.接下来打开浏览器调试工具，查看浏览器的缓存，就可以看到缓存的数据。

此时再刷新页面，你就会发现数据还在。
已上是全部内容，希望我的理解能给你带来帮助，如有错误或不足之处，欢迎指正，谢谢！
参考：https://segmentfault.com/a/1190000018150177