How to use the payload of previous http calls in ngrx effects

Question

I'm newbie to ngrx effects, I'm building Angular 5 application with ngrx store. I want to dispatch a action from first action to second action i.e. I have two actions getAlertFilters and getAlertArticles.

I want to dispatch a action to getAlertArticles from getAlertFilters action upon response from http newsService's getFilters function. I need to use the same payload that was used for getAlertFilters action and need to pass as a new payload with additional parameters to getAlertArticles action.

Also, How do I construct new object ArticleRequest from getFilters response and pass it as payload to getAlertArticles action. Please guide me on how to do this. Below is my code.

@Effect()
getAlertArticles$ = this.actions$
    .ofType(NewsActions.GET_ALERT_ARTICLES_REQUEST)
    .pipe(
        map((action: NewsActions.GetAlertArticlesRequest) => action.payload),
        switchMap((articlesRequest: ArticlesRequest ) => {
            return this.newsService.getArticles(articlesRequest.channel, articlesRequest.filter, articlesRequest.locale, articlesRequest.page)
                .pipe(
                    tap(() => this.store.dispatch(new LoaderActions.HideLoader(config.LOADER_ID))),
                    map(res => {
                        return {
                            type: NewsActions.GET_ALERT_ARTICLES_SUCCESS,
                            payload: res
                        };
                    }),
                    catchError((e: HttpErrorResponse) => Observable.of({
                        type: NewsActions.GET_ALERT_ERROR,
                        payload: e
                    }))
                );
        }),
);

    @Effect()
    getAlertFilters$ = this.actions$
.ofType(NewsActions.GET_ALERT_FILTER_REQUEST)
.pipe(
    map((action: NewsActions.GetAlertFilterRequest) => action.payload),
    switchMap((filterRequest: FiltersRequest ) => {
        return this.newsService.getFilters(filterRequest.channel, filterRequest.locale)
            .pipe(
                tap((res) => {
                    this.store.dispatch(new NewsActions.GetAlertArticlesRequest({channel: res.getChannel, filter: 768, locale: 'en_ca' , page: 1}));
                }),
                map(res => {
                    return {
                        type: NewsActions.GET_ALERT_FILTER_SUCCESS,
                        payload: res
                    };
                }),
                catchError((e: HttpErrorResponse) => Observable.of({
                    type: NewsActions.GET_ALERT_ERROR,
                    payload: e
                }))
            );
    }),

);

Envil Envil · Accepted Answer · 2018-07-02T09:12:07

I think you can do like this:

Merge the 2 actions: NewsActions.GET_ALERT_ARTICLES_REQUEST and NewsActions.GET_ALERT_FILTER_REQUEST to be one, maybe NewsActions.GET_ALERT_FILTER_AND_ARTICLES_REQUEST
Your 2 effects now listen to the same action NewsActions.GET_ALERT_FILTER_AND_ARTICLES_REQUEST
When you dispatch the NewsActions.GET_ALERT_FILTER_SUCCESS action, you should save the needed param for the getAlertArticles$ effect to the store.
In your getAlertArticles$ effect, add the following chain after the .ofType(NewsActions.GET_ALERT_FILTER_AND_ARTICLES_REQUEST):

Here is the code:

getAlertArticles$ = this.actions$
  .ofType(NewsActions.GET_ALERT_FILTER_AND_ARTICLES_REQUEST)    
  .combineLatest(this.store.select(fromNews.getYourNeededData)
    .filter(data => !isEmpty(data))
  .pipe(
    switchMap(([action, data]: [NewsActions.GetAlertFilterAndArticlesRequest, YourDataFormat]) => //do your request here),

How to use the payload of previous http calls in ngrx effects

1 Answers