How to use mobx-devtools-mst - 10 common examples

hydrate: flow(function* () {

      if (__DEV__) {
        // Inspect individual models
        makeInspectable(self);
        makeInspectable(Movies);
        makeInspectable(InTheaters);
        makeInspectable(Genres);
      }

      const storageKey = 'Store.settings';
      const data = JSON.parse(yield AsyncStorage.getItem(storageKey));
      if (data) {
        applySnapshot(self.settings, data);
      }

      onSnapshot(self.settings, debounce(
        snapshot => AsyncStorage.setItem(storageKey, JSON.stringify(snapshot)),
        1200,
      ));

      // Load all supplimental data
      Genres.loadAllGenres();

hydrate: flow(function* () {

      if (__DEV__) {
        // Inspect individual models
        makeInspectable(self);
        makeInspectable(Movies);
        makeInspectable(InTheaters);
        makeInspectable(Genres);
      }

      const storageKey = 'Store.settings';
      const data = JSON.parse(yield AsyncStorage.getItem(storageKey));
      if (data) {
        applySnapshot(self.settings, data);
      }

      onSnapshot(self.settings, debounce(
        snapshot => AsyncStorage.setItem(storageKey, JSON.stringify(snapshot)),
        1200,
      ));

import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { createSocket, initSocket } from './services/websocket';
import initNotifications from './services/notifications';
import createStore from './store';
import config from './config';
import theme from './assets/theme.json';

const socket = createSocket();
const store = createStore({ socket }); // Inject dependencies

initNotifications();

if (!config.IS_PROD) {
  const makeInspectable = require('mobx-devtools-mst').default; // eslint-disable-line
  makeInspectable(store);
}

initSocket({ store }); // Attach event listeners and inject dependencies

ReactDOM.render(
  
    
      
    
  ,
  document.getElementById('root')
);

registerServiceWorker();

coreModules.forEach(mapModules);
  pkgModules.forEach(mapModules);

  // Create MST Stores
  const Stores = Store.props(storesProps);
  const { initialSelectedItem } = window['wp-pwa'];

  stores = Stores.create(window['wp-pwa'].initialState, {
    request,
    machine: 'server',
    ...envs,
    initialSelectedItem,
  });
  if (dev) {
    const makeInspectable = require('mobx-devtools-mst').default;
    makeInspectable(stores);
  }
  // Add both to window
  if (typeof window !== 'undefined') window.frontity = { stores, components };

  // Start all the client sagas.
  stores.clientStarted();

  // Initializes the beforeCSRs.
  Object.values(stores).forEach(({ beforeCsr }) => {
    if (beforeCsr) beforeCsr();
  });

  // Start App.
  render(App);

  // Inform that the client has been rendered.

constructor (props) {
    super(props)
    this.classifierStore = RootStore.create({}, {
      authClient: props.authClient,
      client
    })
    makeInspectable(this.classifierStore)
  }

Navigation.events().registerAppLaunchedListener(() => {
  if (__DEV__) {
    makeInspectable(UI);
    makeInspectable(Account);
    makeInspectable(Stories);
    makeInspectable(Items);
  }

  UI.hydrate().then(startApp);
});

constructor (props) {
    super()
    const { isServer, initialState } = props
    this.store = initStore(isServer, initialState, props.client)
    makeInspectable(this.store)
  }

export const StoreProvider: React.FC = ({ children }) => {
  const store = useLocalStore(getDetaultStore);
  makeInspectable(store);
  return (
    
      {children}
    
  );
};

Navigation.events().registerAppLaunchedListener(() => {
  if (__DEV__) {
    makeInspectable(UI);
    makeInspectable(Account);
    makeInspectable(Stories);
    makeInspectable(Items);
  }

  UI.hydrate().then(startApp);
});

const removeById = (id: string) => {
      self.items.delete(id);
    };

    return {
      loadAll,
      loadById,
      loadByName,
      create,
      removeById,
    };
  })
  .create();

makeInspectable(ContentTypes);

export const ContentTypeRef = types.reference(ContentType, {
  get(identifier: string) {
    return ContentTypes.items.get(identifier);
  },
  set(value: Instance) {
    return value.id;
  },
} as any);