Как мне подписаться на @computed object в mobx?

Question

Я хочу подписаться на вычисляемое свойство, которое возвращает простой объект.

Codesandbox: https://codesandbox.io/s/epic-noether-g8g0x

Я сделал простой пример своей ситуации, чтобы точно показать, в чем проблема:

const zeroSize = {
    width: 0,
    height: 0
};

class Item {
    @observable size = zeroSize;
}

class Collection {
    @observable childrens: Item[] = [];

    @computed get size() {
        return this.childrens.length > 0 && this.childrens[0] ? this.childrens[0].size : zeroSize;
    }

    constructor() {
        reaction(() => this.size, size => {
            // Expected { width: 0, height: 1000 }
            // Actual { width: 0, height: 0 }
            console.log('-----size=', toJS(size));
        });
    }
}

const item1 = new Item;
const collection1 = new Collection;
collection1.childrens.push(item1);
item1.size.height = 1000;

https://github.com/mobxjs/mobx/issues/2176

Answer 1

Вы прослушиваете неверное изменение.

Поскольку вы прослушиваете изменения размера, высота вызовет изменение:

const item1 = new Item; // size === 0
const collection1 = new Collection; // size === 0
collection1.childrens.push(item1); // size === 1 (triggers reaction)
item1.size.height = 1000; // size === 1 (doesn't trigger reaction)

Если вы хотите прослушать любое ивсе изменения, которые являются результатом childrens изменения, то это то, что вам нужно слушать изменения для.

reaction(
  () => toJS(this.childrens),
  size => {
    // Expected { width: 0, height: 1000 }
    // Actual { width: 0, height: 0 }
    console.log("-----size=", toJS(this.size));
  }
);

Прослушивая toJS(this.childrens), вы можете подписаться на когда длина детейменяется, но также и при изменении свойства элемента дочернего элемента.

Если вы хотите слушать только при добавлении или удалении новых дочерних элементов, тогда имеет смысл прослушивание size. Если вы хотите слушать, когда добавляются, удаляются или изменяются дети, вам нужно изменить то, что вы слушаете.

Вот песочница: https://codesandbox.io/embed/white-hill-fntxt

И соответствующая консольжурналы:

-----size= Object {width: 0, height: 0}
-----size= Object {width: 0, height: 1000}