In my sample Angular 2 application , I am using ngrx/store and ngrx/effects for state management.
Below is one of the function in a component to add a new item.
addAuthor() {
this.store.dispatch(addAuthorAction(this.fg.value));
console.log('2')
}
In the above code this.store.dispatch(addAuthorAction(this.fg.value));
takes care of making an AJAX call to server and adding a new author to
database, which is working fine.
And because this.store.dispatch(addAuthorAction(this.fg.value));
is an async
action , console.log("2")
statement gets executed even before the AJAX call
is completed.
My question is , what needs to be modified so that console.log gets executed after store.dispatch is done.
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.