解决react项目刷新页面，store中状态消失的问题

在日常使用redux中发现，当我们刷新页面之后，store中的状态会消失。但是在某些时候可能不仅需要用到sotre来管理各种状态，还需要store里的数据能一直保存，就像缓存一样。
redux-persist可以让你的数据从state分离出来，保存到浏览器缓存中，以便实现数据的持久化存储
下载依赖

npm install redux-persist--save

接下来只需要去修改store的生成文件和入口文件就行了，reduce和action不需要修改
store.js

import {createStore, applyMiddleware} from 'redux'
import mainReducers from "./reduces";
import thunk from "redux-thunk";

引入我们需要的方法
import {persistStore, persistReducer} from 'redux-persist'
import storage from 'redux-persist/lib/storage'

const persistConfig = {
    key: 'root',
    storage: storage,
}

persistConfig 对象还可以设置黑名单白名单，就是不需要永久保存的数据。

const myPersistReducer = persistReducer(persistConfig, mainReducers)
const store = createStore(myPersistReducer, applyMiddleware(thunk))
export const persistor = persistStore(store)
export default store

入口文件中

/*
入口js
 */
import React from 'react'
import {render} from 'react-dom'
import {HashRouter, Switch, Route} from 'react-router-dom'
import Login from './containers/login/login'
import Rigester from './containers/register/register'
import Main from './containers/main/main'
import {Provider} from 'react-redux'
import store from "./redux/store";

引入PersistGate标签，和persistor
import {persistor} from './redux/store'
import {PersistGate} from 'redux-persist/lib/integration/react'

在Provider 下面使用PersistGate标签在包裹一层，并且传以下属性
render(
    (
        <Provider store={store}>
            <PersistGate loading={null} persistor={persistor}>
                <HashRouter>
                    <Switch>
                        <Route path='/register' component={Rigester}></Route>
                        <Route path='/login' component={Login}></Route>
                        <Route component={Main}></Route> {/*不指定path，当当前路由与所有路由都不匹配时，就回去请求这个组件*/}
                    </Switch>
                </HashRouter>
            </PersistGate>
        </Provider>
    ),
    document.getElementById('root')
)

经过以上操作后，store中的状态就会自动保存到浏览器缓存中，刷新了页面，也会自动给store赋值。