How to track reactive functions?

[rickmed]

Considering the following example:

var data = observable({
   numbers: [1,2,3],
   sum: () => data.numbers.reduce((a, b) => a + b, 0)
});

var disposer = autorun(() => console.log(data.sum));

How would I track all the functions that depend on when an observed object property is mutated?

I'm thinking on building debugging tools equivalent to https://github.com/mobxjs/mobx-react-devtools but not for react components.

So when a property is mutated on an observed object, you would log all the reactive functions that where called.

[mweststrate]

Hi @rickmed,

There are several (not yet documented but stable) api's to achieve that, and the can all be found here:
https://github.com/mobxjs/mobx/blob/master/src/api/extras.ts

extras.trackTransitions: calls a callback whenever an atom updates its value or a computation starts / ends its calculation. This reveals in detail when which computation is run.

extras.getDependencyTree: given a computed observable / reaction returns a tree with all observables it depends on (and which observers they depend on etc).

extras.getObserverTree: the same but in the other direction, gives a tree with all observers that are observing the given observable.

Objects created by observable(scalar / array), computed and autorun can be passed to those functions. For objects / maps you have to pass the observable of the specific property (for objects that is for example object.$mobx.values[propertyName]. I you want I can add a second parameter to those functions with property name (like mobx.observe)

[rickmed]

@mweststrate awesome! thanks. let me try those.

[rickmed]

@mweststrate I was able to get to work extras.trackTransitions -I quickly learned that for it to be useful you have to name all those anonymous functions.

for getDependencyTree and getObserverTree I always get this result:

{ id: undefined, name: 'undefined@undefined' }

BTW, not sure what you meant with " For objects / maps you have to pass the observable of the specific property (for objects that is for example object.$mobx.values[propertyName]" but it works passing observable(object).

[mweststrate]

The tree functions (currently) only work directly on Atoms, which are stored internally in objects that are observable,

so you should invoke it like getDependencyTree(myObject.$mobx.values.myAttribute), see also some of the tests in these files: https://github.com/mobxjs/mobx/blob/master/test/extras.js

[mweststrate]

Note the api's to do these kind of analyses have been extended and documented as part of MobX 2.2: http://mobxjs.github.io/mobx/refguide/api.html