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
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);
}
);