redux-persist

 
 

  
  
registerUser: function (user, success, fail) {
      API.registerUser(user, function(userServer){
        var localUser = UserLocalStorage.serverUserToLocalUser(userServer);

        UserLocalStorage.save(localUser);
        this.user = localUser;
        if(success){
          success();
        }
      }.bind(this), fail);

  }

在注册用户时，需要保持当前的用户信息到本地存储中。
if (!this.user) {
      this.user = {};
      UserLocalStorage.get(function (user) {
        this.user = user;
      }.bind(this));
    }


  
  
当进入需要登录才能访问的页面检查 user 是否存在，如果不存在优先在本地存储中获取。如果只有一两个状态需要持久化，我们可以编写类似的代码，如果存在大量的状态需要持久化呢？
  
  
引入 redux-persist
  
  
import {persistStore, autoRehydrate} from 'redux-persist'
const store = createStore(reducer, autoRehydrate())
persistStore(store)

  
  
最简单的方式就是这三行代码，我们看看这三行代码可以帮助我们完成哪些事情？
  
  
persistStore(store, [config, callback])
  
  
arguments

    blacklist 黑名单数组，可以忽略一些 reducers 中的 key。

    whitelist 白名单数组，一旦设置，其他的 key 都会被忽略。

    storage 一个 Engine，例如 LocalStorage 和 AsyncStorage

    transforms 在 rehydration 和 storage 阶段被调用的转换器

    debounce storage 操作被调用的频度。

    store redux store 我们要存储的 store。

    config 对象

callback rehydration 操作结束后的回调。

returns 返回值是 persistor 对象，可以调用后续的链式方法。

  
  
这个方法主要帮助我们做了两件事情，生成存储 store 的 persistor 和 rehydration action 的 dispatch，配合 autoRehydrate这个增强器(enhancer) 就完成了我们前面自己手写的代码，如果我们 store 中所有的数据都需要持久化并且没有什么特殊的需求，简单的两行代码就可以解决问题了。
  
  
autoRehydrate 的增强器是什么呢？其实也很简单，如果没有特殊的 merge 逻辑，它就用 storage 中的数据去恢复(rehydrate) store 中的数据，就可以用 autoRehydrate 了，他会做些简单的合并逻辑，而且如果 state 被 reducer 改变了，他也会「聪明的」用改动后的值替换掉 storage 中原来的值。