redux-persist

作者: 以德扶人 | 来源:发表于2017-03-06 10:50 被阅读6934次
    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 中原来的值。原文

    相关文章

      网友评论

        本文标题:redux-persist

        本文链接:https://www.haomeiwen.com/subject/lhiygttx.html