如何在成功调用 NGRX 服务后执行两种不同类型的操作

Question

所以我有一个产品搜索效果。基本上我首先发送一个 search_start 动作，它有一个用于该搜索的参数有效负载，效果发生然后转到一个服务，我得到那个响应，它给了我一个产品列表。我希望能够做两件事：

使用产品集合发送成功的操作
保存该搜索的参数，以便稍后用于当前位于 'action.payload'

我在第二部分遇到了问题，主要是因为执行 switchMap 并且 returnType 为 'SearchResultResponseType' 意味着我现在无法执行 SearchSave(action.payload)主要是因为payload的类型是'SearchParameterType'。所以我只能执行我的 SearchSuccess 操作。

有什么办法可以实现吗？我尝试将响应类型更改为超类型，该超类型同时采用 SearchParameterType 和 SearchResultResponseType 作为该类型的两个属性，并让我的 productSearchService return 取而代之，但这似乎也会产生错误。有没有更简单的方法？

       export class ProductSearchEffects {
          @Effect() startSearch$: Observable<
            ActionWithPayload<SearchResultResponseType> | Observable<Action>
          > = this.actions$.pipe(
            ofType<SearchStart>(ProductSearchActions.SEARCH_START),
            mergeMap(action =>
              this.productSearchService.fetchSearchResults(action.payload)
                .pipe(
// if successful then save search and dispatch search success
                switchMap((data: SearchResultResponseType) => [
                    new SearchSave(action.payload),
                    new SearchSuccess(data),
                  ]),

                  catchError(() => of(new SearchFail())),
                ),
            ),
          );

Answer 1

我认为您不需要显式定义 return 类型。否则，您可以使用 mergeMap 来完成。我看到你把你的 switchMap 和 mergeMap 倒过来了，你只需要把位置倒过来就可以了。

export class ProductSearchEffects {
          @Effect() startSearch$ = this.actions$.pipe(
            ofType<SearchStart>(ProductSearchActions.SEARCH_START),
            switchMap(action =>
              this.productSearchService.fetchSearchResults(action.payload)
                .pipe(
                  mergeMap((data: SearchResultResponseType) => [
                    new SearchSave(action.payload),
                    new SearchSuccess(data),
                  ]),
                  catchError(() => of(new SearchFail())),
                ),
            ),
          );

Answer 2

我见过并亲自采用的常见做法是为您的操作添加别名，即 type SearchAction = SearchStart | SearchSave | SearchSuccess | SearchFail'，然后您的效果的 return 类型是 Observable<SearchAction>。然后 TypeScript 将验证 returned 的所有操作是否都被别名覆盖。

如何在成功调用 NGRX 服务后执行两种不同类型的操作

How to perform two different types of action after successful service call NGRX

angular

rxjs

ngrx

rxjs6

ngrx-effects