Question

我需要在React Native中保留一个MST商店。数据很少改变。

我在使用AsyncStorage和AutoRun之间感到困惑。

Answer 1

对于持久性MST商店，您可能会对使用mst-persist感兴趣，根据README，该文件目前是MST的onSnapshot和applySnapshot的小包装（免责声明：创建者）。

要以mst-persist为后盾的AsyncStorage将数据持久保存在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 RN漫画阅读器应用程序中的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)
    })
}

大量其他示例也显示了类似的功能，例如this gist mst-persist的部分灵感来自this repo，它们使用HoC和{{ 1}}与PersistGate类似，而this gist则将多个存储作为参数。

如何在React Native中保留Mobx状态树？

1 个答案: