Reaction not being triggered by nested observables

Question

I have a observable class with nested observable properites:

class TodoItem {
  @observable name: string = "";
  @observable completed: boolean = false;

  @action
  setCompleted(value: boolean) {
    this.completed = value;
  }

  constructor(name: string) {
    this.name = name;
    makeObservable(this);
  }
}

class TodoList {
  @observable todos: TodoItem[] = [];

  @action
  addTodo(todo: TodoItem) {
    this.todos.push(todo);
  }

  constructor() {
    makeObservable(this);
  }
}

When I am trying to modify a TodoItem in the todos properties of a TodoList instance, the reaction block is not triggered:

reaction(
  () => store.todos,
  (value) => {
    console.log(value);
  }
);

Demo: https://codesandbox.io/s/mobx-reaction-81q33n

Expected: when toggling the todo, the todo list should be printed to the console

Happeded: Nothing is printed

Answer 1

To actually react to the change of some observable value you need to use it, or dot into it or touch it, whatever you call it. Your reaction only tracks changes to the store.todos array itself, so if you change this array it will fire.

It won't fire if you modify some item inside of it obviously, because this reaction does not touch or use them in any way.

If you want to react to all and every change inside store.todos you can use JSON.stringify or MobX method toJS, like that:

reaction(
  () => JSON.stringify(store.todos),
  (value) => {
    console.log(value);
  }
);