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 中原来的值。原文