【React】使用redux-persist 刷新不重置state

在做一个项目时 发现每次刷新菜单栏都会变成初始位置 实用性很差 ，便想着把redux中的数据保存下来，查了一下，应使用

redux-persist 

首先使用yarn下载下来（基础的redux默认下载好了）

yarn add redux-persist

修改store中的index.js

import { createStore,applyMiddleware,compose } from 'redux';
import reducer from './reducer';
import thunk from 'redux-thunk'; // 用来在action里面支持异步
import { persistStore, persistReducer } from 'redux-persist' // 用来避免刷新导致store重置
import storage from 'redux-persist/lib/storage'; //将redux保存到localstorage中

const composeEnhancers =
  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose;

const enhancer = composeEnhancers(
  applyMiddleware(thunk)
);

const myReducer = persistReducer({
  key: 'root',
  storage
}, reducer);

const store = createStore(myReducer, enhancer);

export const persistor = persistStore(store);
export default store;

在网站入口app.js中修改添加 在Provider 和组建之前添加一层  PersistGate

.
.
.
import { Provider } from 'react-redux';
import store, { persistor } from './store';
import { PersistGate } from 'redux-persist/integration/react';
.
.
.
render(){
    return (
    
        
.
.
.
        
    
.
.

查看storage 发现已经存贮 刷新页面 菜单不变 成功 

参考 https://blog.csdn.net/weixin_43206949/article/details/98221770