Store: Action not getting dispatched when called inside an async action.

[ayush987goyal]

Versions

* ngxs: 3.1.4
* @angular/core: 6.0.3

Repro steps

@Action(Login)
login({ dispatch }: StateContext<...>) {
  dispatch(new ShowLoading());
  return this.http.get(...).pipe(...);
}

Observed behavior

The ShowLoading action is not getting dispatched though the returned observable is getting subscribed and works fine.

Desired behavior

The actions should have been dispatched.

[markwhitfeld]

Hi @ayush987goyal
That should be working. Is it possible to provide a repro using StackBlitz?
You can edit this as a starting point: https://stackblitz.com/edit/ngxs-simple

Are you certain that the action is not being dispatched or re you just not seeing the Loading?

PS. Is the StateContenxt typo just part of the example and not part of your code?

[ayush987goyal]

The StateContenxt was just typo in example.

The ShowLoading action is part of some other State. When I see the logs generated by LoggerPlugin, I don't see this action getting dispatched. Hence I mentioned that the action is not getting dispatched. Also, the loading is not working either(so not a logging issue).

I will try to repro it.

[ayush987goyal]

Hi @markwhitfeld
I couldn't exactly reproduce the issue but I fave found another I think this might be related to the actual issue.
https://stackblitz.com/edit/ngxs-simple-12je1p

In the mentioned StackBlitz example, when you click the Feature button, the state update is not reflected until you trigger next action(like clicking Click Me or Feature). Is this intentional?

[markwhitfeld]

I think that you may have identified an issue. Not sure if it is related to feature modules or not.
But, here is an adaption of your code that works:
https://stackblitz.com/edit/ngxs-simple-12je1p-alternative?file=app/feature/feature.state.ts
If you look at the code I have run the http call after the Add dispatch observable has completed... Not sure why the other code is failing

[markwhitfeld]

Ok, I removed the loading of the state from the feature module and added it to the root module and the issue is still happening, so it is not related to the feature module.

[ayush987goyal]

I am doing a similar thing in my project but with Loading. Chaining the dispatches doesn't seem to be good solution in that case but yeah this probably is a bug.

[Knacktus]

I've added some debugging:

https://stackblitz.com/edit/ngxs-simple-2nx6tc?file=app/app.component.ts

The action is called and the state is updated. The issue seems to be in updating the component. Wasn't there some optimization regarding the change detection recently?

[ayush987goyal]

Yes the state is getting updated. The component's ChangeDetectionStrategy is default and not OnPush. This change in properties should have caused a change detection. I am not sure why it hasn't.

[markwhitfeld]

It looks like it is related to the NgZone stuff.
The internals are run outside of the angular zone for performance reasons.
I brought the observable back onto the Angular zone and it now works:
https://stackblitz.com/edit/ngxs-simple-12je1p-withzone?file=app%2Fapp.component.ts

[ayush987goyal]

So what should be the standard way to implement this? Will this be part of NGXS? If not should the enterZone be used for all the selectors?

[markwhitfeld]

Yes, it should be and the code is there that does this. So we will have to debug this to see why it is not happening.

[markwhitfeld]

I just noticed that the stackblitz was on v3.1.0. Upgraded it to the latest (v3.1.4 at the moment) and it all works. Please upgrade and check if it is fixed.

[ayush987goyal]

It seems like it is working after the upgrade.

[markwhitfeld]

Glad it solved it for you.
I fixed this recently so I was surprised when it came up.
The version in the issue description was a bit misleading, otherwise I may have picked it up earlier.