Executing code after dispatch is completed while using ngrx Executing code after dispatch is completed while using ngrx angular angular

Executing code after dispatch is completed while using ngrx


Quick answer : You can't.

As you said, dispatch is asynchronous.

What you should do is use @ngrx/effects. It's nearly the same as using addAuthorAction except that instead of calling a function, you "catch" the dispatched actions and do something just after they've been applied by the reducers.

So what I do in general, is that I divide my actions in 3, for example :

  • FETCH_USER

  • FETCH_USER_SUCCESS

  • FETCH_USER_ERROR

  • FETCH_USER is just used to toggle a boolean so I can display a spinner while fetching the user

  • I catch this action from an effect and make an http request to fetch the user

  • If the http response is OK and I have the info I'm looking for, I dispatch from the effect FETCH_USER_SUCCESS with the response as payload, otherwise I dispatch FETCH_USER_ERROR and I toggle the boolean to false (so we can try to fetch him again for example).

So in your example, if you want to console.log something AFTER the FETCH_USER_SUCCESS, just use another effect to catch the FETCH_USER_SUCCESS and do what you want to here.


Tested with

"@ngrx/core": "^1.2.0","@ngrx/effects": "^7.4.0","@ngrx/router-store": "^7.4.0","@ngrx/store": "^7.4.0","@ngrx/store-devtools": "^7.4.0",

This will also work:

import { ofType, Actions } from '@ngrx/effects';// Constructorconstructor(   private _actions$: Actions,   private _store: Store<any>,) { }// YOUR METHOD    this._store.dispatch(<ACTION>);this._actions$.pipe(ofType(<ACTION_NAME>)).subscribe((data: any) => {  console.log(data);  // returned state data        })


With ngrx you can listen to actions like this:

constructor(private actionsSubject$: ActionsSubject, private store: Store<AppState>) {}ngOnInit() {  this.actionsSubject$.pipe(    takeUntil(this.unsubscribe$), // optional    filter((action) => action.type === SimsActionTypes.SimEditedSuccess)  ).subscribe(({payload}) => {    console.log(payload)  )}

When you dispatch FIRST_ACTION use an effect to make the HTTP request. In the effect, when you have the response back, fire off a SECOND_ACTION with the response as the payload. Then just listen for SECOND_ACTION in your controller .ts file