搭建一个React-redux-router + antd项目（六）用 redux-persist 实现数据持久化

搭建一个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