MobX integration

MobX state often contains duplicate / circular references. CodeBud uses special replacer in order to stringify such objects. All references are replaced with #REF:$<Path here>.

CodeBud.createMobxStoreMonitor

This method allows you to check MobX state on the MobX tab in GUI.

CodeBud.createMobxStoreMonitor takes 1(2) args

store - your MobX store that you wish to inspect
[optional] batchingTimeMs - batching time of sending new MobX state copy (in ms). Defaults to 500. Smaller value gives you smaller delay, but slower performance. It is not recommended to pass value smaller than 100

import { reaction } from "mobx";
import { CodeBud } from "@appklaar/codebud";

// Your MobX store
export const mobXStore = new RootStore();

CodeBud.init("YOUR API KEY HERE", INSTRUCTIONS);

// Here we are subscribing for state updates.
reaction(...CodeBud.createMobxStoreMonitor(mobXStore));

That's it. Now you should be able to check MobX state on the MobX tab in GUI (don't forget to add this tab to navigation bar, it can be done on "Other" tab).

It is not necessary to init CodeBud in the same file, where you are creating your MobX store. You can just import store into the file containing codebud initiation, or you can create a function for codebud initiation and pass store as one of its params (see Redux example), it's similar.

CodeBud.createMobxEventHandler

This method allows you to monitor MobX events.

import { spy } from "mobx";
import { CodeBud } from "@appklaar/codebud";

spy(CodeBud.createMobxEventHandler());

That's it. Now you should be able to check MobX events on the Network tab in GUI.