Mobx Persist Sync

$ npm install mobx-persist-sync --save

Usage

1import { observable } from 'mobx'
2import { create, persist } from 'mobx-persist'
3
4class SomeItem {
5    @persist @observable  name = 'some'
6    @persist @observable count = 0
7}
8
9class SomeStore {
10    @persist('object') @observable         obj = { a: 1, b: 2 }
11    @persist('map')    @observable   stringMap = observable.map<string>({})
12    @persist('list')   @observable     numList = [1,2,3,4]
13    @persist('object', SomeItem) @observable s = new SomeItem
14    @persist('map', SomeItem)    @observable m = observable.map<SomeItem>({})
15    @persist('list', SomeItem)   @observable l = []
16}
17
18const hydrate = create({
19    storage: localForage,   // or MMKV in react-native.
20                            // default: localStorage
21    jsonify: false  // if you use MMKV, here shoud be true
22                    // default: true
23})
24
25// create the state
26export const someStore = new SomeStore()
27hydrate('some', someStore);
28console.log('someStore has been hydrated')
29

without decorators

1const data = observable({
2    title: 'no decorator',
3    someObject: {
4        a: 1,
5        b: 'b',
6    },
7    someArray: [{
8        c: 1,
9        d: 'd'
10    }]
11})
12const schema = {
13    title: true,
14    someObject: {
15        type: 'object',
16        schema: {
17            a: true,
18            b: true
19        }
20    },
21    someArray: {
22        type: 'list',
23        schema: {
24            c: true,
25            d: true
26        }
27    }
28}
29export const someStore = persist(schema)(data)
30hydrate('some', someStore);
31console.log('someStore has been hydrated')

with initial state

1const initialState = window.__STATE__.some || {
2    obj: { a: 2, b: 1 }
3}
4export const someStore = new SomeStore()
5
6hydrate('some', someStore, initialState)
7    .then(() => console.log('some hydrated'))

re-hydration

1const result = hydrate('some', someStore, initialState)
2const rehydrate = result.rehydrate
3console.log('some hydrated')
4
5setTimeout(() => {
6    rehydrate();
7    console.log('rehydrated')
8}, 3000)

API

persist(schema)(object)

• arguments
  • schema string/object Describes the type of data you are planning to persist. Not needed for JS primitive types. Options: 'object' | 'list' | 'map' or a structured schema object.
  • observable any The observable that you are persisting.
• returns a persistence-enabled version of observable

create(config)

• arguments
  • config object Describes the storage container you want your data to reside in.
    • storage localForage/MMKV/localStorage localForage-style storage API. localStorage for Web (default), MMKV for React Native
    • jsonify bool Enables serialization as JSON
    • debounce number Debounce interval applied to storage calls (in miliseconds, default 0).
• returns
  • hydrate function hydrate(key, store, initialState?, customArgs?)
    • key string The key of your datastore that you want to hydrate from your persisted record.
    • store object The store in which that key resides.
    • initialState object Optional initial state the store is seeded with.
    • customArgs object Optional custom arguments that are available during the deserialization process which can be used to pass in e.g. stores to model constructors during deserialization. See https://github.com/mobxjs/serializr#6-use-custom-arguments-to-inject-stores-to-models
    • returns IHydrateResult

interface IHydrateResult

extends function

• methods
  • rehydrate function
    • returns IHydrateResult

Examples

• Web
• React Native

Dependency

• Serializr