mobx-angular icon indicating copy to clipboard operation
mobx-angular copied to clipboard

Trying to understand observables not updating in an expected way when used with async/await

Open SvenSchoene opened this issue 5 years ago • 2 comments

This is kind of weird for me to explain, so I have an example with a few comments:
https://stackblitz.com/edit/angular-egsgoz?file=app/app.component.ts

In general, this is about updates to an observable not happening in an expected fashion.

What I would expect to happen:

I have a store with observables and actions.
I expect that I can render the values of those observables in templates, and that updates to those observables are being tracked in the template.

However, when the updates happen via with promises (via async/await), the updates do not seem to get reflected in the template. No matter what change detection strategy is picked, the updates never reflect what I feel like should happen.

What actually happens:

Updates only happen two await-statements in when not using an OnPush change detection strategy, and only up until one await-statement with OnPush.

The easiest way is to take a look at the commented example. Both, a normal string primitive variable is observed, as well as a list.

Is this expected to work in this way? How would I listen to an observable that is being changed by different parts of the application throughout its lifetime, if async/await does not work as at least I would expect?

Where are my expectations wrong? How would you write this example?

SvenSchoene avatar Oct 29 '20 08:10 SvenSchoene

I think I found the problem. MobX 6 works differently. Need to update the docs and library. You need to call makeAutoObservable instead of using decorators: https://stackblitz.com/edit/angular-ze5a9c?file=app%2Fapp.store.ts

adamkleingit avatar Oct 29 '20 13:10 adamkleingit

Ok, this works beautifully! Thank you very much for the super quick(!) help here, this will enable me to make some progress on a project. 👍

One last question before this can be closed: In the template you seem to have added <div *mobxAutorun="{detach: true}"> instead of <div *mobxAutorun>. Both versions seem to work the same way, at least for this example. Is there any reason to use the version with {detach: true}?

SvenSchoene avatar Oct 30 '20 01:10 SvenSchoene

Hi folks, going to close this issue due to inactivity. If this is still a problem please feel free to open up a new Issue. 😄

Chuckv01 avatar May 08 '23 16:05 Chuckv01