store: 🐞[BUG]: NgxsReduxDevtoolsPluginModule logs actions in wrong order when dispatching actions from async actions

Any news on this Topic? I want to use ngxs instead of ngrx but this is a major drawback

Really hard to track app state when this is happening ;/ Any new on this?

@guilhermechiara sorry, but the problem is still not solved

Hi @markwhitfeld. I think the whole action chaining mechanism is flawed. Treating dispatched actions from the action handler as child actions might not be the best approach. I suggest that dispatching actions within another action should be treated as a new action in the chain, so the current action is completed and the dispatched action will be handled as a next action in the chain. For the asynchronous methods, the Action attribute could be extended to allow to specify two more actions, one for success and one for error. These actions will be dispatched automatically, if they are specified. I think this will be easier for developers to chain actions and it will solve the order of the actions in redux-devtools.

considering this is clearly still happening - can we reopen the issue?

Hi @DavidTheProgrammer. I can assure you that this project is maintained 😉 The fundamental issue here is that we are “borrowing” the redux dev tools as a dev tool. Unfortunately the redux dev tools has no concept of ‘asynchronous’ actions (ones that have a lifecycle beyond ‘dispatch’). We send the actions to the dev tool once the actions are complete, and therefore, if the first action’s completion is dependent on the second action’s completing then they will appear to be out of order, because this is in fact the order of completion.

We had a contributor that started writing a dev tool for us (that would recognise the action lifecycle in ngxs), but they couldn’t continue due to changes in their personal life, so it hasn’t received much attention since then. I made a comment here about some approaches that we could take to improve this plugin: https://github.com/ngxs/store/issues/139#issuecomment-390673126 I will raise it with the team to see what they think.

Another issue with the DevTool showing actions in reverse order, is that the state changes are not displayed properly on the parent Action. If the parent action changes a property and the same property is then changed on the child, the DevTool shows no change on the parent.

In this example if the service errors out the DevTools shows: LoadQuotesFail LoadAllQuotes And both have no state changes because the busy property changes to true and then back to false.

@Action(LoadAllQuotes)
loadAllQuotesAction({ getState, setState, patchState, dispatch }: StateContext<IQuoteStateModel>) {
  patchState({ busy: true });
  return this.service.getQuotes().pipe(
              map(data => dispatch(new LoadQuotesSuccess(data))),
              catchError(error => of(dispatch(new LoadQuotesFail(error))))
              );
}

@Action(LoadQuotesSuccess)
loadQuotesSuccessAction(
  { getState, setState, patchState, dispatch }: StateContext<IQuoteStateModel>,
  { payload }: LoadQuotesSuccess
) {
  patchState({ quotes: payload, busy: false });
}

@Action(LoadQuotesFail)
loadQuotesFailAction(
  { getState, setState, patchState, dispatch }: StateContext<IQuoteStateModel>,
  { payload }: LoadQuotesFail
) {
  patchState({ busy: false });
}

The devtools of ngxs seem to be abandoned. At least from what I could gather from https://github.com/ngxs/devtools/issues/118 and the repo.

So it comes down to fixing it in the plugin I guess? Are people using other ways to visualize their state, that I missed?

@filipjnc There is much richer information that we are able to gather about the actions that we would want to display in the dev tools. Something that the standard redux dev tools won’t support. When you see it you will know why 😉 It will be a while before this is ready though, so we do need to look at better options of displaying info in the redux dev tools.

Ngxs’s approach allows for a bit more flexibility than the typical redux style frameworks and as a result some of the paradigms don’t fit nicely into what the redux dev tools expect. Actions dispatched as a part of a parent action are considered to be children and as a result the parent action only completes once the children complete. The completion states are what you are seeing in the dev tools, hence the out of order listing.

This approach fixes the issue:

When wrapping the new dispatch inside asyncScheduler the dispatch waits for the action to complete and then is executed:

Works like a charm:

@Action(LoadData)
  loadData(ctx: StateContext<SampleStateModel>, action: LoadData): void {
    ctx.patchState({
      loaded: false,
    });
    // service has loaded
    asyncScheduler.schedule(() => ctx.dispatch(new LoadDataSuccess('data')));
    
    // service hasn't loaded
     asyncScheduler.schedule(() => ctx.dispatch(new LoadDataFail('err')));
  }

Checking for an update on this issue. As mentioned above it seems as though the ngxs/devtools project is abandoned. Would be great to see some kind of resolution or potential workaround on this issue.

This issue was solved? I am still getting this behavior.

I had a look at the code here and it sends the info to the redux dev tools when the action has completed. This makes sense because the dev tools requires the new state as part of an action’s payload.

By design in NGXS the parent action only completes when the child action completes, so because the child action is completing before the parent it is posting its completed state to the dev tools before the parent.

@amcdnl We will need to figure out how to handle this correctly… There are probably a few ways we could go here. But just a quick thought is that we could reflect an action in multiple states because we have more defined lifecycle stages for actions than redux:

• On Dispatch
• Every time it triggers a state change
• On Completion/Error/Cancel

@amcdnl In theory it could have fixed it but I think we made an assumption here about the cause. I can confirm that the issue is still happening with 3.0.1. I forked the repo above and updated the deps (love the update all deps to latest button in stackblitz! ): https://stackblitz.com/edit/ngxs-simple-issue-139-repo?file=app/app.state.ts I think that we should reopen this issue.