Question

我是ngrx效果的新手，我正在使用ngrx存储构建Angular 5应用程序。我想将一个动作从第一个动作调度到第二个动作，即我有两个动作getAlertFilters和getAlertArticles。

我要调度一个操作，以从中获取getAlertArticles 来自http newsService的响应后的getAlertFilters操作 getFilters函数。我需要使用用于 getAlertFilters动作，需要作为新的有效负载传递 getAlertArticles操作的其他参数。

此外，如何从getFilters构造新对象ArticleRequest 响应并将其作为有效负载传递给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
                }))
            );
    }),

）;

Answer 1

我认为您可以这样做：

合并两个动作：NewsActions.GET_ALERT_ARTICLES_REQUEST和NewsActions.GET_ALERT_FILTER_REQUEST成为一个动作，也许是NewsActions.GET_ALERT_FILTER_AND_ARTICLES_REQUEST
您的2种效果现在可以收听相同的动作NewsActions.GET_ALERT_FILTER_AND_ARTICLES_REQUEST
调度NewsActions.GET_ALERT_FILTER_SUCCESS动作时，应将getAlertArticles$效果所需的参数保存到商店中。
以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),

如何在ngrx效果中使用以前的http调用的有效负载

1 个答案: