Tengo una clase observable con propiedades observables anidadas:
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); } } Cuando intento modificar un TodoItem en las propiedades de todos de una instancia de TodoList , el bloque de reaction no se activa:
reaction( () => store.todos, (value) => { console.log(value); } );Demostración: https://codesandbox.io/s/mobx-reaction-81q33n
Esperado: al alternar las tareas pendientes, la lista de tareas pendientes debe imprimirse en la consola
Sucedió: No se imprime nada
Para reaccionar realmente al cambio de algún valor observable, debe usarlo, dot into o touch , como lo llame. Su reaction solo rastrea los cambios en la matriz store.todos , por lo que si cambia esta matriz, se activará.
Obviamente, no se disparará si modifica algún elemento dentro de él, porque esta reacción no los touch ni los usa de ninguna manera.
Si desea reaccionar a todos y cada uno de los cambios dentro store.todos , puede usar JSON.stringify o el método toJS para JS, así:
reaction( () => JSON.stringify(store.todos), (value) => { console.log(value); } );