CODEWITHSUNDEEP
mobx
jarpineh
jarpineh

Reputation: 81

Mobx Autorun in practice

I'm trying to get Mobx's autorun to work correctly.

My use case is I have one model that I like to serialize (or dehydrate) when it is changed and add that information to another model's data. This brings me rudimentary time travel of model states. Both are observables.

Edit: Idea in model separation is that one is app's data model and other should be completely separate library that I could use from the app. I need to track changes in the app regularly, but show UI for the state tool on the same page.

Now, autorun seems to make its own inferences of what I'm actually tracking. When I moved the model instance inside observing model's instantiation, autorun wasn't called anymore when changes happened. When model instance was created on the module top level, it worked as I expected. This was when I only changed one property of observing model (the one that gets changed by every autorun call). When I tried changing two things at once in the observing model, autorun was now called for these changes also, leading to a unending cycle (which Mobx caught).

I'd like to know how to express what I'm tracking with autorun function be more explicit, or wether there are other ways to keep track of model changes and update other model when anything happens.

Edit with code example.

This is what I did (greatly simplified):

class DataModel {
    @observable one_state = null;
}

class StateStore {
    @observable states = [];
}

let data = new DataModel();
let store = new StateStore();

autorun(() => {
   store.states.push(data.one_state);
   console.log("new data", toJSON(store.states));
});

data.one_state = "change 1";
data.one_state = "change 2";

And this creates circular dependency because autorun gets called for both original data model change and the resulting store change, whilst I'm only interested in tracking changes to the former.

Edit with working result:

class DataModel {
    @observable one_state = null;
}

class StateStore {
    @observable states = asFlat([]);
}

let data = new DataModel();
let store = new StateStore();

autorun(() => {
   store.states.push(data.one_state);
});

data.one_state = "change 1";
data.one_state = "change 2";

As per @mweststrate answer, using asFlat with store's states variable and removing the logging from autorun broke the problem cycle.

Upvotes: 2

Views: 14239

Answers (1)

mweststrate
mweststrate

Reputation: 4978

It is a bit tough to answer this question without any real code. Could you share some code? But note that MobX works best if you make a small mind shift: instead of imperatively saying "if X happens Y should be changed" it is better to say "Y can be derived from X". If you think along those lines, MobX will really start to shine.

So instead of having two observable models, I think one of them should be a derivation of the other (by using computed indeed). Does that make sense? Otherwise, feel free to elaborate on your question a bit more :)

Edit:

Ok thanks for the code. You should remove the log statement to avoid it from looping; Currently you log the states model, so each time it changes, the autorun will run, adding the first item (again!), changing the stateModel etc...

Secondly I'm not sure whether the states list should be observable, but at least its contents should not be observable (since it is a snapshot and the data per state should not change). To express that, you can use the asFlat modifier, which indicats that the states collection should only be shallowly observable: @observable states = asFlat([]).

Does that answer your question?

Upvotes: 7

Related Questions