observable.shallow doesn't react in reaction.

[ygnoh]

Hi all, I wonder why this reaction doesn't react:

const a = { name: "hi" };

class B {
  _as = [];

  constructor() {
    makeObservable(this, {
      _as: observable.shallow
    });
  }

  get as() {
    return this._as;
  }

  push(a) {
    this._as.push(a);
  }
}

const b = new B();

reaction(
  () => b.as,
  () => console.log("changed")
);

console.log("start pushing");
b.push(a);
console.log("end pushing");

I thought because _as is observable.shallow and it changed, the reaction will react. but it doesn't.

observable.shallow doesn't work in reaction? and how can I fix it to work as expected?

Thank you for considering my question.

---

You can see this code also in codesandbox: https://codesandbox.io/s/pure-mobx-nfvp1?file=/src/index.js

[mweststrate]

b.as is a reference that doesn't change, so there is no reason to react here. You are probably looking for () => b.as.length (for example). Make sure to grok https://mobx.js.org/understanding-reactivity.html

[ygnoh]

Thank you for answering