MST Persist

gistfile1.txt

import { onSnapshot, applySnapshot, getSnapshot } from 'mobx-state-tree';

interface PersistenceWhitelist<T> {
  key: string;
  getPersistence: (T) => Partial<T>;
}

/**
 * Rehydrate a store from localstorage. Set up an event to persist store data to localstorage.
 * @param key localstorage key
 * @param opts store any mst store instance
 */
export function withPersistence<T>(
  store: T,
  opts: { key: string; whitelist: PersistenceWhitelist<T>[] }
): T {
  const { key, whitelist } = opts;
  onSnapshot(store, (_snapshot: T) => {
    const snapshot: Partial<T> = {};
    for (const item of whitelist) {
      snapshot[item.key] = item.getPersistence(_snapshot[item.key]);
    }
    const data = JSON.stringify(snapshot);
    try {
      localStorage.setItem(key, data);
    } catch (err) {
      if (process.env.NODE_ENV === 'development') {
        console.warn(err);
      }
      // silence errors about sizing.
    }
  });

  const data = localStorage.getItem(key);
  if (data) {
    const existingSnapshot = getSnapshot<T>(store);
    const persistedData = JSON.parse(data);
    const snapshot = {
      ...existingSnapshot,
      ...persistedData,
    };
    try {
      applySnapshot(store, snapshot);
    } catch (err) {
      if (process.env.NODE_ENV === 'development') {
        console.warn(err);
      }
      // discard snapshot, for it is invalid
    }
  }

  return store;
}