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
                  }))
              );
      }),
  

  );

Answer 1

I think you can do like this:

1. 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
2. Your 2 effects now listen to the same action NewsActions.GET_ALERT_FILTER_AND_ARTICLES_REQUEST
3. When you dispatch the NewsActions.GET_ALERT_FILTER_SUCCESS action, you should save the needed param for the getAlertArticles$ effect to the store.
4. 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),