mst-persist
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.3 • Public • Published

    mst-persist

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

    Persist and hydrate MobX-state-tree stores.

    Installation

    npm i -S mst-persist

    Usage

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

    API

    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
      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

    Install

    npm i mst-persist

    DownloadsWeekly Downloads

    3,571

    Version

    0.1.3

    License

    Apache-2.0

    Unpacked Size

    34.9 kB

    Total Files

    13

    Last publish

    Collaborators

    • agilgur5