mst-async-storage

A mobx-state-tree extension granting your models React Native's AsyncStorage powers of persistance.

Requirements

• mobx-state-tree 2.x or 3.x
• react-native >= 0.56
• @react-native-async-storage/async-storage >= 1.x.x

Installing

yarn add mst-async-storage

Usage

The following async actions are added:

import { types } from "mobx-state-tree"
import { withAsyncStorage } from "mst-async-storage"

export const NiceThingsModel = types
  .model("NiceThings")
  .props({
    unicorns: true,
    dragons: true,
    cake: true,
    spiders: false,
    nickleback: false,
  })
  .actions(self => ({
    setSpiders(value: boolean) {
      self.spiders = value
    },
  }))
  .extend(withAsyncStorage({ key: "nice.things" })) // <-- 🎉

Now you can load it:

async demo () {
  // create your model as usual
  const happy = NiceThingsModel.create()

  // now load the data from async storage
  await happy.load()

  // and when you change something
  happy.setSpiders(true)

  // it will automatically save back to async storage!
}

You can also intercept the snapshot after it is loaded and before it is saved with onLoad and onSave.

import { types } from "mobx-state-tree"
import { withAsyncStorage } from "mst-async-storage"

export const NiceThingsModel = types
  .model("NiceThings")
  .props({
    unicorns: true,
    dragons: true,
    cake: true,
    spiders: false,
    nickleback: false,
  })
  .actions(self => ({
    setSpiders(value: boolean) {
      self.spiders = value
    },
  }))
  .extend(
    withAsyncStorage({
      key: "nice.things",
      // always ensures that nickelback is loaded into MST as `false` here
      onLoad: snapshot => {
        return {
          ...snapshot,
          nickleback: false,
        }
      },
      // always ensures that nickelback is saved to AsyncStorage as `false` here
      onSave: snapshot => {
        return {
          ...snapshot,
          nickelback: false,
        }
      },
    }),
  )

Options

withAsyncStorage() accepts an optional object as a parameter with these keys:

| key | type | what it does | | -------- | ----------------- | ---------------------------------------------------------------------------------------- | | key | string | The key to use when saving to AsyncStorage (default: the model type name) | | autoSave | boolean | Should we automatically save when any values change on the model? (default: true) | | only | string, string[] | will only include the keys with these names | | except | string, string[] | will omit keys with these names | | onLoad | (snapshot) => any | Will be called after state is loaded from AsyncStorage. Return snapshot to change it. | | onSave | (snapshot) => any | Will be called before AsyncStorage, allowing you to modify the snapshot by returning it. |

Contributing?

Yes plz!

Fork it, Clone it, Branch it, Yarn it
Build it, Test it, Push it, PR it

To run the tests, I like to open two shells yarn test:compile:watch and yarn test --watch. If you run ava manually, make sure to add -s to run the tests serially because I fail mocking (because the mocks are shared state and bleed into each other).