我需要在 React Native 中保留一个 MST Store。数据很少更改。
我对使用 AsyncStorage 和 AutoRun 感到困惑。
最佳答案
对于持久化 MST 存储,您可能对使用 mst-persist
感兴趣。 ,根据自述文件,它目前是 MST 的 onSnapshot
的一个小包装器。和 applySnapshot
(免责声明:我是创作者)。
使用 mst-persist
在 React Native 中持久化数据由 AsyncStorage
支持,一个人会这样做:
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,当前的 README 实际上会指向 a commit在我作为示例制作的 OSS RN 漫画阅读器应用程序中。如果您对如何在没有其他库(如
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)
})
}
还有一些其他示例也显示了类似的功能,例如 this gist那个
mst-persist
部分灵感来自,this repo使用 HoC 和 PersistGate
s 类似于 redux-persist
, 和 this gist将多个商店作为参数。
关于react-native - 如何在 React Native 中持久化 Mobx 状态树?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50887863/