Как сохранить дерево состояний Mobx в React Native?

Question

Мне нужно сохранить MST Store в React Native. Данные меняются редко.

Я запутался между использованием AsyncStorage и AutoRun.

Answer 1

Для сохранения хранилищ MST вам может быть интересно использовать mst-persist, который, согласно README, в настоящее время является небольшой оболочкой для MST onSnapshot а также applySnapshot (отказ от ответственности: я создатель).

Чтобы сохранить данные в React Native с помощью mst-persist при поддержке 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 фактически укажет вам на фиксацию в приложении для чтения манги OSS RN, которое я сделал в качестве примера.

Если вам интересно, как это сделать с MST без другой библиотеки, например mst-persist, исходный код сохраняемости в настоящее время составляет < 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отчасти вдохновлено этим репо, в котором используются HoC иPersistGates похож на redux-persist, и эта суть, которая принимает в качестве аргумента несколько хранилищ.