user3245789 user3245789 - 5 months ago 45
React JSX Question

Detect when mobx observable has changed

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
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?


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;