Serialize a store to Redux Devtools without triggering computations or reactions

[dstaver]

Is it possible to get a serializable representation of a store without triggering computations or reactions? Something suitable for logging to redux devtools.

mobx-log supports devtools, but if you have mobx strict mode enabled it triggers a ton of warnings. I wanted to make something that doesn't affect the state at all if possible.

I'd expect to see whatever is available, not the full state. If a computed has already computed, show the value, if not just <not computed> or something like that.

Also I would only want to display whatever can be easily serialized to primitive values, or possibly nested objects and arrays containing primitive values. Functions and other things could just show a string <function>.

In many cases it's possible to build a representation of the state just by using spy, and creating or updating objects with the debugObjectName and the diff (as long as the diff was limited to simple objects and primitives at least).

I can also get at the value using getAtom()

Mostly I got stuck with nested observables and maps.

is there anything existing that can do something like this?

[kubk]

Hi, the author of mobx-log here. The default toJS method is suitable for serializing a store without computed methods. This function was used in the package before it was replaced by a function that shows computed values: kubk/mobx-log#36. I am using Redux Devtools with strict mode (enforceActions) and I see no warning in the console.

Am I right that your warnings are caused by computedRequiresReaction / observableRequiresReaction turned on? If yes, then I can investigate ways to mitigate it. One way is to fallback to toJS as it was before when the computedRequiresReaction option is enabled. This can be solved on the mobx-log side.

[dstaver]

Ok, wow! I have to admit I hadn't tested the latest version of mobx-log and it seems to work so much better than last time I tried. I don't get any warnings either. Even a store with 15.000 nested items is usable although I did get a performance warning from redux-devtools.

Very useful to know that toJS can be used that way. Thanks!

I guess the only logical question now is why isn't your library promoted on the Mobx frontpage?

[kubk]

@dstaver Thanks for the response. It’s mentioned in the Troubleshooting section: https://mobx.js.org/react-integration.html#troubleshooting. I believe that for the Mobx front page we need something bigger, like fully-fledged devtools :)