Как использовать полезную нагрузку предыдущих http-вызовов в эффектах ngrx - PullRequest
Новая
       35

Как использовать полезную нагрузку предыдущих http-вызовов в эффектах ngrx

0 голосов
/ 02 июля 2018

Я новичок в эффектах ngrx, я создаю приложение Angular 5 с магазином ngrx. Я хочу передать действие от первого действия ко второму действию, то есть у меня есть два действия getAlertFilters и getAlertArticles.

  • Я хочу отправить действие, чтобы получить действие getAlertFilters после ответа от http newsService's Функция getFilters. Мне нужно использовать ту же полезную нагрузку, которая использовалась для действие getAlertFilters и должно передаваться как новая полезная нагрузка с дополнительные параметры для действия getAlertArticles.

  • Также, Как мне построить новый объект ArticleRequest из getFilters ответ и передать его как полезную нагрузку для действия getAlertArticles. пожалуйста укажи мне, как это сделать. Ниже мой код. 

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

    );

1 Ответ

0 голосов
/ 02 июля 2018

Я думаю, вы можете сделать так:

  1. Объедините 2 действия: NewsActions.GET_ALERT_ARTICLES_REQUEST и NewsActions.GET_ALERT_FILTER_REQUEST в одно, может быть, NewsActions.GET_ALERT_FILTER_AND_ARTICLES_REQUEST
  2. Ваши 2 эффекта теперь слушают одно и то же действие NewsActions.GET_ALERT_FILTER_AND_ARTICLES_REQUEST
  3. Когда вы отправляете действие NewsActions.GET_ALERT_FILTER_SUCCESS, вы должны сохранить необходимый параметр для эффекта getAlertArticles$ в магазине.
  4. В свой эффект getAlertArticles$ добавьте следующую цепочку после .ofType(NewsActions.GET_ALERT_FILTER_AND_ARTICLES_REQUEST):

Вот код: 

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),
...