How to Persist Mobx State Tree in React Native? - react-native

Question

I need to persist a MST Store in React Native. The data is changed seldomly.
I'm confused between using AsyncStorage and AutoRun.

Answer 1

For persisting MST stores, you might be interested in using mst-persist, which, per the README, is currently a small wrapper around MST's onSnapshot and applySnapshot (disclaimer: I'm the creator).
To persist data in React Native with mst-persist backed by AsyncStorage, one would do:
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'))
My original use case for mst-persist was for React Native and the current README will actually point you to a commit in an OSS RN manga reader app I made as an example.
If you're interested in how to do it with MST without another library like mst-persist, the persistence source code is actually < 50 LoC currently. And minus some features, it's a brisk < 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)
})
}
There are a handful of other examples out in the wild that show similar functionality as well, such as this gist that mst-persist is partly inspired by, this repo that uses HoCs and PersistGates similar to redux-persist, and this gist that takes multiple stores as an argument.