如何从嵌套的 rxjs 运算符返回多个操作

Question

我无法在以下效果中分派多个操作：

    @Effect()
    someEffect$ = this.actions$.pipe(
      ofType(someAction: Actions),
      mergeMap(
        (action)=>{
          return this.authService.getProfile(action.payload.authInfo).pipe(
              map((response: any) => {

                  if (response.isErrorResponse) {
                    return new HeaderActions.AuthFail(response);
                  } else {

                 //here i'd like to return multiple actions
                    return [
                      new HeaderActions.FetchMPInfoSuccess(this.fetchMpInfoSuccesState(getMpProfileResponse)),
                      new HeaderActions.GetAccountStates(true)
                  ]
                  }
              }),
              catchError((error:HttpErrorResponse )=>{
                return of(new HeaderActions.AuthFail(response));
              })
            );
        }
      )
    );

我尝试在返回块中添加一组动作，但这给出了一个错误，即我没有发送有效的动作，知道我做错了什么吗？

Answer 1

您可以使用switchMap而不是mergeMap 。 然后使用flatMap或switchMap代替map 。

代码应该是这样的：

@Effect()
someEffect$ = this.actions$.pipe(
  ofType(someAction: Actions),
  switchMap(
    (action)=>{
      return this.authService.getProfile(action.payload.authInfo).pipe(
          flatMap((response: any) => {

              if (response.isErrorResponse) {
                return new HeaderActions.AuthFail(response);
              } else {

             //here i'd like to return multiple actions
                return [
                  new HeaderActions.FetchMPInfoSuccess(this.fetchMpInfoSuccesState(getMpProfileResponse)),
                  new HeaderActions.GetAccountStates(true)
              ]
              }
          }),
          catchError((error:HttpErrorResponse )=>{
            return of(new HeaderActions.AuthFail(response));
          })
        );
    }
  )
);

要访问子组件中的数据，您可以将此方法与 @Input() 设置内容一起使用：

@Input() set(data: any) {
if (data) { console.log(data) }}

html 中的数据将一直存在。

Map修改源 Observable 发出的每个项目并发出修改后的项目。

FlatMap ， SwitchMap还对每个发射的项目应用 function 但不是返回修改后的项目，而是返回可以再次发射数据的 Observable 本身。

FlatMap合并多个 Observable 发出的项目并返回单个 Observable。

SwitchMap与 FlatMap 有点不同。 每当新项目开始发射时，SwitchMap 都会取消订阅前一个源 Observable，因此总是从当前 Observable 发射项目。

如果您想了解更多关于 rxjs 运算符的信息，请查看此处。

Answer 2

尝试：

@Effect()
    someEffect$ = this.actions$.pipe(
      ofType(someAction: Actions),
      switchMap(
        (action)=>{
          return this.authService.getProfile(action.payload.authInfo).pipe(
              map((response: any) => {

                  if (response.isErrorResponse) {
                    return [new HeaderActions.AuthFail(response)];
                  } else {

                 //here i'd like to return multiple actions
                    return [
                      new HeaderActions.FetchMPInfoSuccess(this.fetchMpInfoSuccesState(getMpProfileResponse)),
                      new HeaderActions.GetAccountStates(true)
                  ]
                  }
              }),
              catchError((error:HttpErrorResponse )=>{
                return of(new HeaderActions.AuthFail(response));
              })
            );
        }
      )
    );

所以基本上我所做的是，我没有在服务调用之前使用mergeMap ，而是将它换回了简单的switchMap 。

我从mergeMap更改它的原因是：您只从单个 stream 返回值。