mobx-angular
mobx-angular copied to clipboard
Observables without initial value aren't updated correctly
Recently I have updated angular to version 12 and angular-mobx to the latest and mentioned, that some of my pages don't work at all. After investigation, I find out what is the problem. On my project, I'm using mobx in combination with decorators (@observables...) and ChangeDetectionStrategy.OnPush. I also added makeObservable(this)
to all my components that use mobx decorators. And I mentioned, that mobx doesn't update delayed (API calls, timeout, etc) actions when observable doesn't have an initial value.
You can check the issue here:
https://angular-ymwswe.stackblitz.io
There is @observable someString
, which is updated in setTimeout, and if someString
didn't have an initial value, it will not be rendered, but if it has any value (even undefined) it works as expected.
I'm just curious if that's a library issue or expected behavior? If it's expected I would suggest adding some mention or warning about it README, so users know about it.
As the MobX documentation states regarding limitations:
-
make(Auto)Observable
only supports properties that are already defined. Make sure your compiler configuration is correct, or as work-around, that a value is assigned to all properties before usingmake(Auto)Observable
. Without correct configuration, fields that are declared but not initialized (like inclass X { y; }
) will not be picked up correctly.