实战 React redux-persist解决刷新react-redux数据丢失

489 阅读1分钟

安装

npm install redux-persist --save

yarn add redux-persist

在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;

在项目根文件下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();

image.png

引用:redux-persist管理redux, 解决刷新react-redux数据丢失!_redux persist_追逐ぢ的博客-CSDN博客