redux数据持久化好帮手：redux-persist

前言

web数据持久化最经典的场景莫过于登录态了。用户登录网站后，应该保留一断时间的登录态。一般来说，我们会将用户的登录信息保存在localStorage或者cookie中。

这只是简单的持久化数据，不就是对localStorage进行读写操作嘛，so easy。但是，当需要持久化的数据结构比较复杂时，就显得有点麻烦了。有没有一个好的工具可以帮我们处理这个事情呢？有，那就是redux-persist（当然啦，前提是你使用redux来进行数据管理）。

redux-persist的使用

redux-persist 的使用很简单，以redux-persist 4.1.0为例：

const { browserHistory } = require('react-router');
const { syncHistoryWithStore, routerReducer } = require('react-router-redux');
const { createStore, combineReducers } = require('redux');
const { student,school } = require('./reducers');
//  只要用上 persistStore 和 autoRehydrate 就行啦
const { persistStore, autoRehydrate } = require('redux-persist');
//  存储机制，可换成cookie等其他机制
const { asyncSessionStorage } = require('redux-persist/storages');

const initialState = {
  student: {
    age: 21,
    sex: "female",
  },
  school:{
    name: "蓝翔大学"
  }
};

const reducers = combineReducers({
  student,
  school,
  routing: routerReducer,
});

 //  autoRehydrate作为参数传入redux的createStore方法
const store = createStore(
  reducers,
  initialState,
  autoRehydrate(),
);

//  persistStore的使用，可配置很多参数，如存储引擎、黑白名单等。
persistStore(
  store,
  {
    storage: asyncSessionStorage,
    blacklist: [
      'routing',
      'school'  // school reducer 的数据不进行持久化
    ],
  },
);

const history = syncHistoryWithStore(browserHistory, store);

module.exports = {
  store,
  history,
};

对于student和school两个reducer，我们只持久化student的数据。打开浏览器的开发者工具，你可以看到student的数据被存储在了sessionStorage里。

image.png

刷新浏览器，redux-persist会从sessionStorage里恢复student数据，达到数据持久化的目的。

小结

redux-persist使用起来非常简单。同时它又非常强大，不仅仅为浏览器提供了localStorage/sessionStorage/cookie等持久化方案，还为React Native提供了AsyncStorage持久化方案。通过灵活的配置，你就可以实现自己想要的持久化方案，很优雅~

目前redux-persist已经更新到v5.4.0版本了，v5相比v4，语法上存在一些差异，文档写得不是太好，有一点坑。可以通过跑通v4的demo来了解它的理念，再来学习v5。

最后编辑于：2017.11.30 22:38:23