如何在React Native中持久化Mobx状态树？
如何在React Native中持久化Mobx状态树？
提问于 2018-06-16 20:21:40
我需要在React Native中持久化一个MST Store。数据很少发生变化。
我把使用AsyncStorage和AutoRun弄糊涂了。
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-06-13 04:39:25
对于持久化MST存储，您可能会对使用mst-persist感兴趣，根据自述文件，它目前是MST的onSnapshot和applySnapshot的一个小包装器(免责声明:我是创建者)。
要使用AsyncStorage支持的mst-persist在React Native中持久化数据，您可以这样做：
import { types } from 'mobx-state-tree'
import { AsyncStorage } from 'react-native'
import { persist } from 'mst-persist'
const SomeStore = types.model('Store', {
name: 'John Doe',
age: 32
})
const someStore = SomeStore.create()
persist('some', someStore, {
storage: AsyncStorage, // default: localStorage
jsonify: true // if you use AsyncStorage, this should be true
// default: true
whitelist: ['name'] // only these keys will be persisted
}).then(() => console.log('someStore has been hydrated'))我最初使用mst-persist的用例是React Native，当前的自述文件实际上会在我作为示例制作的OSS漫画阅读器应用程序中指向a commit。
如果您对如何在没有其他库(如mst-persist )的情况下使用MST做到这一点感兴趣，那么目前的持久性源代码实际上是< 50 LoC。除去一些功能，它是一个轻快的< 20 LoC：
import { onSnapshot, applySnapshot } from 'mobx-state-tree'
export const persist = (name, store, options = {}) => {
let {storage, jsonify} = options
onSnapshot(store, (_snapshot) => {
const snapshot = { ..._snapshot }
const data = !jsonify ? snapshot : JSON.stringify(snapshot)
storage.setItem(name, data)
})
return storage.getItem(name)
.then((data) => {
const snapshot = !jsonify ? data : JSON.parse(data)
applySnapshot(store, snapshot)
})
}还有一些其他的例子也展示了类似的功能，比如mst-persist部分受其启发的this gist，使用HoC和类似于redux-persist的PersistGate的this repo，以及以多个商店为参数的this gist。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50887863
复制相关文章
相似问题