How to wait until one store is fulfilled after an action is dispatched to dispach a second action

Question

I have a store with init data related to my component, an example of this data is a string with the apiPath.

   ngOnInit() {
       // this store contains data related to the component
       this.store.dispatch(this.searchActions.addPageData(this.pageData));
  }

Then I have another action that requires data from the previous store and gets triggered whenever there is a route param change:

this.route.params.subscribe((params: Params) => {
    this.store.dispatch(this.searchActions.routerParamsSearchPageChanged(pageFilters));
})

How do you wait until for the first action to fill the store, to dispatch the second action.

http://stackoverflow.com/questions/35173649/angular2-how-to-chain-async-service-calls-http-requests-in-a-component — silentsod, Dec 13 '16 at 23:57
I think this might be related: http://stackoverflow.com/questions/40872357/waiting-for-ngrx-action-before-loading-page-with-url-parameter/40905330 — chrigu, Dec 14 '16 at 07:06
http://stackoverflow.com/questions/40343835/performing-advanced-http-requests-in-rxjs/40346998, http://stackoverflow.com/questions/41092488/rxjs-json-data-with-an-array-processing-each-item-further-in-the-stream/41096657, http://stackoverflow.com/questions/39566268/angular-2-rxjs-how-return-stream-of-objects-fetched-with-several-subsequent/39578646#39578646 — martin, Dec 14 '16 at 07:23
@chrigu My second dispatch, when route changes, requires info from the store filled by the other store, so combineLatest doesn't work as I need them to be syncronous not async and in parallel. — Prieto JP, Dec 14 '16 at 10:49
try this you can relate it http://stackoverflow.com/questions/42061159/how-to-reload-a-http-get-request-after-performing-a-function/42061257#42061257 — Saurabh Agrawal, Feb 07 '17 at 05:49

score 1 · Answer 1 · edited Feb 07 '17 at 05:36

I'm assuming the first action (addPageData) populates the store with some information. Then later on, you want to filter out the data using the route parameter, guessing some type of query? Perhaps you could elaborate a little more if this query doesn't suit your needs.

Basically, retrieve both the store information you want and the query parameter. Filter that query by some type of criteria, this could be simply checking for null like I am to make sure the data exists.

 Observable.combineLatest(
        this.store.select(state => state.bookState),
        this.route.params.select<string>('query')
    )
    .filter(([bookState]) => bookState.books !== null)
    .subscribe(([books, query]) => {
        this.store.dispatch({
            type: '[Books] FILTER_BY_QUERY', 
            payload: {
                bookType: books.type,
                query: query
            }
        });
    });

How to wait until one store is fulfilled after an action is dispatched to dispach a second action

1 Answers1