Persist and hydrate MobX-state-tree stores


61100.1.32 years ago4 years agoMinified + gzip package size for mst-persist in KB



package-json releases commits
dt dy dm dw
typings build status code coverage

Persist and hydrate MobX-state-tree stores.


npm i -S mst-persist


import { types } from 'mobx-state-tree'
import localForage from 'localForage'
import { persist } from 'mst-persist'

const SomeStore = types.model('Store', {
  name: 'John Doe',
  age: 32

const someStore = SomeStore.create()

persist('some', someStore, {
  storage: localForage,  // or AsyncStorage in react-native.
                         // default: localStorage
  jsonify: false  // if you use AsyncStorage, this shoud be true
                  // default: true
  whitelist: ['name']  // only these keys will be persisted
}).then(() => console.log('someStore has been hydrated'))


persist(key, store, options)

  • arguments

    • key string The key of your storage engine that you want to persist to.
    • store MST store The store to be persisted.
    • options object Additional configuration options.
      • storage localForage / AsyncStorage / localStorage Any Storage Engine that has a Promise-style API similar to localForage. The default is localStorage, which has a built-in adaptor to make it support Promises. For React Native, one may configure AsyncStorage instead.
        Any of [`redux-persist`'s Storage Engines]( should also be compatible with `mst-persist`.
      • jsonify bool Enables serialization as JSON (default: true).
      • whitelist Array<string> Only these keys will be persisted (defaults to all keys).
      • blacklist Array<string> These keys will not be persisted (defaults to all keys).
  • returns a void Promise

Node and Server-Side Rendering (SSR) Usage

Node environments are supported so long as you configure a Storage Engine that supports Node, such as redux-persist-node-storage, redux-persist-cookie-storage, etc. This allows you to hydrate your store server-side.

For SSR though, you may not want to hydrate your store server-side, so in that case you can call persist conditionally:

if (typeof window !== 'undefined') { // window is undefined in Node

With this conditional check, your store will only be hydrated client-side.


None yet, but can take a look at agilgur5/react-native-manga-reader-app which uses it in production. Can view the commit that implements it here.

How it works

Basically just a small wrapper around MST's onSnapshot and applySnapshot. The source code is currently shorter than this README, so take a look under the hood! :)


Inspiration for parts of the code and API came from redux-persist, mobx-persist, and this MST persist PoC gist

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from