I am using Angular with rxjs and I need to figure out a way to wait for the store to update its data after an action is dispatched to it to do something with that data. Here is what my relevant code looks like so far in my component.ts
ngOnInit() {
//subscribe to the store, get data from it
this.store.pipe(select(selectors.getDataSelector)).pipe(takeUntil(this.destroy$)).subscribe(x => {
this.data$ = x;
});
}
updateData() {
this.store.dispatch(new actions.getDataAction());
// this action hits the http request, and stores the data in the store which is fetched with getDataSelector
// now I need to do some condition that says `if the data in the store has completed updating after the action then do something
if() {
// do something with this.data$
}
}
As previously said I wouldn't react in the updateData
function, but rather in a tap
operator like so:
ngOnInit() {
// Don't pipe multiple times as you did before
this.store.pipe(
select(selectors.getDataSelector),
takeUntil(this.destroy$),
tap((data) => this.foo())
)
.subscribe((data) => {
this.data$ = data;
});
}
updateData() {
this.store.dispatch(new actions.getDataAction());
}
foo() {
// do side-effects
}