React全家桶之整合redux-persist

一言以蔽之，redux-persist是把redux中的数据在localstorage中存起来，起到持久化的效果

在Create React App中使用

1.安装

npm i redux-persist

2.在main.jsx中引入并使用(只放出关键代码)

import {persistStore, persistReducer} from 'redux-persist'
import storage from 'redux-persist/lib/storage'

const persistConfig = {
    key: 'root',
    storage: storage,
    stateReconciler: autoMergeLevel2 // 查看 'Merge Process' 部分的具体情况
}

const myPersistReducer = persistReducer(persistConfig, reducers)
// const store = createStore(reducers, applyMiddleware(thunk, routerMiddleware(history)))
const store = createStore(myPersistReducer, applyMiddleware(thunk, routerMiddleware(history)))

const persistor = persistStore(store)

ReactDom.render(
    <Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
            <ConnectedRouter history={history}>
                <MyApp/>
            </ConnectedRouter>
        </PersistGate>
    </Provider>,
    document.getElementById('app'))