mst-persist






Persist and hydrate MobX-state-tree stores.

Installation

``sh
npm i -S mst-persist
`

Usage

`javascript
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'))

`

$3

#### 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\ Only these keys will be persisted (defaults to all keys).
- blacklist Array\ These keys will not be persisted (defaults to all keys).

- returns a void Promise

$3

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:

`javascript
if (typeof window !== 'undefined') { // window is undefined in Node
persist(...)
}
`

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

Examples

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! :)

Credits

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