redux-persist管理redux, 解决刷新react-redux数据丢失！

  在我们实际开发react项目中可能有某些需求需要持久化报错redux里面的数据，比如登录状态，这时候就可以用到redux-persist 这款插件解决这个问题，它的原理是使用sessionstorage来持久化数据。

1：安装redux-persist这款插件

  

npm install redux-persist --save

//

yarn add redux-persist

2:在redux文件夹下的index.js添加

import { createStore} from 'redux';
import reducer from './reducer';
import {persistStore, persistReducer} from 'redux-persist';
import storageSession from 'redux-persist/lib/storage/session';
 const storageConfig = {
        key: 'root', // 必须有的
        storage:storageSession, // 缓存机制
        blacklist: ['name','age'] // reducer 里不持久化的数据,除此外均为持久化数据
}
const myPersistReducer = persistReducer(storageConfig, reducer);
const store = createStore(myPersistReducer);

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

3:在项目根文件下index.js下

import React from 'react';
import ReactDOM from 'react-dom';
// import App from './App';
import {Provider} from 'react-redux';
import store from './store';
import {persistor} from './store';
import TodoList from './TodoList';
import * as serviceWorker from './serviceWorker';
import {PersistGate} from 'redux-persist/lib/integration/react';
ReactDOM.render(
          <Provider store={store}>
            <PersistGate loading={null} persistor={persistor}>
                <TodoList/>
            </PersistGate>
          </Provider>
          , document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

 

以上就可以解决redux数据刷新丢失的情况！！！