Почему объекты созданные через класс не наблюдаются mobx?

Question

[Иван Спасов]

Почему не работает наблюдение за объектом, когда объект создан через new ?

class RootStore {
  public readonly aStore: AStore
  public readonly bStore: { value: number; };
  public constructor() {
    makeAutoObservable(this);
    this.aStore = new AStore();
    this.bStore = { value: 1 }; 
  }
}

class AStore {
  public value: number = 1;

  public changeValue(value: number): void {
    this.value = value;
  }
}

использую так:

const rootStore = new Store();
  
  reaction(() => rootStore.aStore.value, (value) => console.log('aStore was changed', value)); // не работает, хотя значение в объекте стора меняется
  reaction(() => rootStore.bStore.value, (value) => console.log('bStore was changed', value)); // работает

  const Component: React.FC = observer(() => {
    return (
      <div>
         <button onClick={() => rootStore.aStore.changeValue(Math.random())}>aStore fill random</button>
         <button onClick={() => rootStore.bStore.value = Math.random()}>aStore fill random</button>
      </div>
    )
  });

реакция изменения объекта созданного через {} срабатывает, а у объект созданный через new нет, хотя значение в сторе меняется, почему?

Answer 1

[Alexandroppolus]

Рекурсивная наблюдаемость объектов (выставляемая по умолчанию в makeAutoObservable и успешно примененная в bStore) не залетает в пользовательские классы. Считается, что класс (в твоем случае AStore) должен сам настроить внутри себя наблюдение.

об этом написано в документации https://mobx.js.org/observable-state.html
ctrl+F "primitives and class instances are never converted to observables"