NGRX，Rxjs：对于这种情况，什么是更好的解决方案？在行动中可以观察到？

在我的应用程序中，我有一个案例如下，我想知道如何以更好的方式进行：

// the effects function
this.user$ = this.actions$.pipe(
  ofType(UserActions.FETCH_USER),
  switchMap((_) => {
    return userService.getUser().pipe(
      map((res) => {
        return new UserActions.FetchUserSuccess(this.transformUserResData(res));
      }),
      catchError(() => {
        return observableOf(new UserActions.FetchUserFail());
      })
    );
  })
);

这是一个简单的effect函数，在将响应数据作为有效负载传递给

FetchUserSuccess

函数之前，只需提及

success

案例。我需要改变它。变换函数如下：

  private transformUserResData(users: User[]): UserInfo[] {
    let groupIDNames: Array<IdNameMap>;
    this.groupStoreService.groupIDNames$.subscribe((res) => {
      groupIDNames = res; // array of {Id: "id", Name: "name"} object
    })
    return users.map((each) => {
      return {
        id: each.id,
        title: each.title,
        category: each.category, 
        groupName: groupIDNames.find(current => current.Id === each.groupID).Name
      };
    })       
  }

但通过这种方式，transform函数将返回Observable，Observable将传递给redux action。我不知道这是redux的最佳实践

---

如果有其他更聪明的解决方案？谢谢你

你可以用如下API响应组合你的ngrx store observable来更新你的代码：

// the effects function
    this.user$ = this.actions$.pipe(
      ofType(UserActions.FETCH_USER),
      switchMap((_) => {
        return userService.getUser()
                         .pipe(
                                //lets transform the data
                                mergeMap((users: User[]) => {
                                  return this.groupStoreService.groupIDNames$
                                             .pipe(
                                               map((groupIDNames: Array<IdNameMap>) => {
                                                  return users.map((each) => {
                                                    return {
                                                      id: each.id,
                                                      title: each.title,
                                                      category: each.category, 
                                                      groupName: groupIDNames.find(current => current.Id === each.groupID).Name
                                                    };
                                                  });
                                               })
                                             );
                                }),
                                map((userInfos: UserInfo[]) => {
                                  return new UserActions.FetchUserSuccess(userInfos);
                                }),
                                catchError(() => {
                                  return observableOf(new UserActions.FetchUserFail());
                                })
                          );
      })
    );

// the effects function
    this.user$ = this.actions$.pipe(
      ofType(UserActions.FETCH_USER),
      switchMap((_) => {
        return userService.getUser()
                         .pipe(
                                mergeMap((users: User[]) => {
                                  return combineLatest(of(users), this.groupStoreService.groupIDNames$.pipe(take(1)));
                                }),
                                map(([users, groupIDNames]) => {
                                  //project [map] your users to userInfo
                                  const userInfos = users.map((each) => {
                                                                return {
                                                                  id: each.id,
                                                                  title: each.title,
                                                                  category: each.category, 
                                                                  groupName: groupIDNames.find(current => current.Id === each.groupID).Name
                                                                };
                                                              });
                                  return new UserActions.FetchUserSuccess(userInfos);

                                }),                                
                                catchError(() => {
                                  return observableOf(new UserActions.FetchUserFail());
                                })
                          );
      })
    );

// the effects function
    this.user$ = this.actions$.pipe(
      ofType(UserActions.FETCH_USER),
      switchMap((_) => {
        return userService.getUser()
                         .pipe(
                                mergeMap((users: User[]) => {
                                  return combineLatest(of(users), this.groupStoreService.groupIDNames$.pipe(take(1)));
                                }),
                                map(([users, groupIDNames]) => {
                                  //project [map] your users to userInfo
                                  const userInfos = users.map((each) => {
                                                                return {
                                                                  id: each.id,
                                                                  title: each.title,
                                                                  category: each.category, 
                                                                  groupName: groupIDNames.find(current => current.Id === each.groupID).Name
                                                                };
                                                              });
                                  return new UserActions.FetchUserSuccess(userInfos);

                                }),                                
                                catchError(() => {
                                  return observableOf(new UserActions.FetchUserFail());
                                })
                          );
      })
    );