一言以蔽之,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'))