在WEB SPA项目开发时,使用redux,如果进行页面跳转,会发现当跳转之后redux会被重置,这是
我们不希望看到的因此需要解决这个问题。
由于store是内存驱动,而非缓存机制。因此,页面刷新(跳转)时store会被初始化,在刷新时需要将store数据持久化。
解决redux在发生页面跳转时会被重置的问题
使用
redux-persist
包,将store保存在浏览器的sessionStorage或者localStorage中。
使用方法如下:
- 引入redux-persisit的包
import {persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import {PersistGate} from 'redux-persist/integration/react';
- 使用Provider,通过
redux-persist
重新构造store
const myReducer = persistReducer({
key: 'root',
storage
}, rootReducer);
const store = createStore(myReducer);
- 然后在Provider内部包装一个
PersistGate
组件即可。
const persistor = persistStore(store);
ReactDOM.render(
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<Router>
<Routes/>
</Router>
</PersistGate>
</Provider>,
document.getElementById('root')
);
完整代码如下
import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter as Router} from 'react-router-dom';
import {createStore, combineReducers} from 'redux';
import {Provider} from 'react-redux';
import Routes from './Routes';
import './assets/styles/common.css';
// persist store
import {persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import {PersistGate} from 'redux-persist/integration/react';
// 引入子reducer文件
import InfoAreaReducer from './pages/Login/components/InfoArea/InfoAreaReducer';
const rootReducer = combineReducers({
InfoAreaReducer
});
const myReducer = persistReducer({
key: 'root',
storage
}, rootReducer);
const store = createStore(myReducer);
const persistor = persistStore(store);
ReactDOM.render(
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<Router>
<Routes/>
</Router>
</PersistGate>
</Provider>,
document.getElementById('root')
);