如何在 React Native 中持久化 Mobx 状态树？答案

【问题标题】：How to Persist Mobx State Tree in React Native?如何在 React Native 中持久化 Mobx 状态树？
【发布时间】：2018-06-16 12:21:39
【问题描述】：

我需要在 React Native 中保留一个 MST 存储。数据很少更改。

我对使用 AsyncStorage 和 AutoRun 感到困惑。

【问题讨论】：

标签： react-native mobx mobx-state-tree

【解决方案1】：

对于持久 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，当前的 README 实际上会在我作为示例制作的 OSS RN 漫画阅读器应用程序中指向 a commit。

如果您对如何在没有像 mst-persist 之类的其他库的情况下使用 MST 执行此操作感兴趣，则持久性源代码当前实际上是

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，PersistGates 类似于 @987654337 @ 和 this gist 将多个商店作为参数。

【讨论】：