Detect when mobx observable has changed

Question

Is it possible to detect when an observable changes in any way?

For instance, say you have this:

@observable myObject = [{id: 1, name: 'apples'}, {id: 2, name: 'banana' }]

And later on, with some user input, the values change. How can I detect this easily?

I want to add a global "save" button, but only make it clickable if that observable has changed since the initial load.

My current solution is to add another observable myObjectChanged that returns true/false, and wherever a component changes the data in the myObject, I also add a line that changes the myObjectChanged to true. And if the save button is clicked, it saves and changes that observable back to false.

This results in lots of extra lines of code sprinkled throughout. Is there a better/cleaner way to do it?

I feel like you could use any of `computed`, `observe`, `spy`, or `autorun` here depending on the level of granularity you need in your observation. There is a simple example here of dirty checking a form with `computed` https://github.com/mobxjs/mobx/issues/164 — m0meni, Oct 11 '16 at 22:51

Mouad Debbar · Accepted Answer · 2016-10-12T15:42:28.980

2

You could use autorun to achieve this:

@observable myObject = [{id: 1, name: 'apples'}, {id: 2, name: 'banana' }]
@observable state = { dirty: false }

let firstAutorun = true;
autorun(() => {
  // `JSON.stringify` will touch all properties of `myObject` so
  // they are automatically observed.
  const json = JSON.stringify(myObject);
  if (!firstAutorun) {
    state.dirty = true;
  }
  firstAutorun = false;
});

edited Oct 12 '16 at 15:42

answered Oct 12 '16 at 06:38

Mouad Debbar

2,658
1
18
18

That works really well, thanks! One little thing though is that firstAutorun should be let, as const won't allow it to change to false. – capvidel Oct 12 '16 at 11:44
Oops, it's fixed now! – Mouad Debbar Oct 12 '16 at 15:43

score 0 · Answer 2 · answered Oct 12 '16 at 04:44

0

Create an action that will push to myObject and set myObjectChanged

@action add(item) {
    this.myObject.push(item);
    this.myObjectChanged = true;
}

answered Oct 12 '16 at 04:44

ajma

11,695
11
67
87

Detect when mobx observable has changed

2 Answers2

Linked