解决react页面刷新store被重置的问题

在WEB SPA项目开发时，使用redux，如果进行页面跳转，会发现当跳转之后redux会被重置，这是
我们不希望看到的因此需要解决这个问题。
由于store是内存驱动，而非缓存机制。因此，页面刷新(跳转)时store会被初始化，在刷新时需要将store数据持久化。

解决redux在发生页面跳转时会被重置的问题

使用redux-persist包，将store保存在浏览器的sessionStorage或者localStorage中。

使用方法如下：

1. 引入redux-persisit的包

import {persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import {PersistGate} from 'redux-persist/integration/react';

2. 使用Provider，通过redux-persist重新构造store

const myReducer = persistReducer({
    key: 'root',
    storage
}, rootReducer);
const store = createStore(myReducer);

3. 然后在Provider内部包装一个PersistGate组件即可。

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

完整代码如下

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter as Router} from 'react-router-dom';
import {createStore, combineReducers} from 'redux';
import {Provider} from 'react-redux';
import Routes from './Routes';
import './assets/styles/common.css';

// persist store
import {persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import {PersistGate} from 'redux-persist/integration/react';

// 引入子reducer文件
import InfoAreaReducer from './pages/Login/components/InfoArea/InfoAreaReducer';
const rootReducer = combineReducers({
    InfoAreaReducer
});

const myReducer = persistReducer({
    key: 'root',
    storage
}, rootReducer);
const store = createStore(myReducer);
const persistor = persistStore(store);

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