搭建一个React-redux-router + antd项目（一）初始化项目
搭建一个React-redux-router + antd项目（二）安装 redux、router、axios和antd
搭建一个React-redux-router + antd项目（三）使用路由
搭建一个React-redux-router + antd项目（四）redux初始
搭建一个React-redux-router + antd项目（五）用action更新store
接第五篇内容，会发现一个问题，就是在每次刷新页面的时候，控制台输出的是一个空的对象，只有再次点击【点击登录】获取到数据来输出到控制台。实际项目中会遇到很多场景需要将数据存在本地，比如登录信息，管理系统的权限，菜单列表等，这样可以避免多次请求，提高前端效率。现在就利用redux-persist来实现数据的持久化。首先安装redux-persist到项目中。
cnpm i redux-persist --save
这里使用了cnpm，这是国内的淘宝镜像，可以有效提升安装下载速度。安装方法见：安装cnpm(淘宝镜像)。
安装完成后，接下来只需要修改 src/index.js 中的部分代码就好了，直接上代码：
+ import { PersistGate } from 'redux-persist/es/integration/react';
+ import { persistStore, persistReducer } from 'redux-persist';
+ import storage from 'redux-persist/lib/storage'
// 重新封装reducer
+ const persistConfig = {
+ key: 'root',
+ storage,
+ };
+ const persistedReducer = persistReducer(persistConfig, Reducers)
// 处理后的 reducers 需要作为参数传递在 createStore 中
- const store = createStore(Reducers, applyMiddleware(thunk))
+ const store = createStore(persistedReducer, applyMiddleware(thunk))
// 持久化 store
let persistor = persistStore(store)
ReactDOM.render(
<Provider store={store}>
+ <PersistGate persistor={persistor}>
<HashRouter>
<App />
</HashRouter>
+ </PersistGate>
</Provider>,
document.getElementById('root'));
这样简单几步就实现了数据的持久化。【点击登录】，手动刷新页面会发现控制台依然可以输出登录信息。在浏览器的Storage里也可以看到已经储存的数据。
image.png
