Repository files navigation

Persist and hydrateMobX-state-tree stores.

npm i -S mst-persist

import{types}from'mobx-state-tree'importlocalForagefrom'localForage'import{persist}from'mst-persist'constSomeStore=types.model('Store',{name:'John Doe',age:32})constsomeStore=SomeStore.create()persist('some',someStore,{storage:localForage,// or AsyncStorage in react-native.// default: localStoragejsonify:false// if you use AsyncStorage, this shoud be true// default: truewhitelist:['name']// only these keys will be persisted}).then(()=>console.log('someStore has been hydrated'))

• arguments

  • keystring The key of your storage engine that you want to persist to.
  • storeMST store The store to be persisted.
  • optionsobject Additional configuration options.
    • storagelocalForage /AsyncStorage /localStorageAny Storage Engine that has a Promise-style API similar tolocalForage.The default islocalStorage, which has a built-in adaptor to make it support Promises.For React Native, one may configureAsyncStorage instead.
      Any ofredux-persist's Storage Engines should also be compatible withmst-persist.
    • jsonifybool Enables serialization as JSON (default:true).
    • whitelistArray<string> Only these keys will be persisted (defaults to all keys).
    • blacklistArray<string> These keys will not be persisted (defaults to all keys).

• returns a void Promise

Node environments are supported so long as you configure a Storage Engine that supports Node, such asredux-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 callpersist conditionally:

if(typeofwindow!=='undefined'){// window is undefined in Nodepersist(...)}

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

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

Basically just a small wrapper around MST'sonSnapshot andapplySnapshot.The source code is currently shorter than this README, sotake a look under the hood! :)

Inspiration for parts of the code and API came fromredux-persist,mobx-persist, andthis MST persist PoC gist