redux-persist ゝ一世哀愁。 2022-06-02 07:50 110阅读 0赞 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 中原来的值。
还没有评论，来说两句吧...