react-nativeReact-Native

redux-persist

2017-03-06  本文已影响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 中原来的值。原文

上一篇下一篇

猜你喜欢

热点阅读