NGRX - 单一效果的多个动作

Question

这就是我的效果..

@Effect() uploadImages$ = this.actions$
  .ofType(ProjectActions.UPLOAD_IMAGES)
  .map(action => action.payload)
  .flatMap(project => this.service.uploadImages(project))
    .switchMap((project) => Observable.of(
      this.imageActions.loadImages(),
      this.projectActions.uploadImagesSuccess(project),
    ));

尝试在 uploadImagesSuccess 触发之前从 API 加载图像列表。

我尝试使用 .concatMap 和 .mergeMap 代替 .switchMap，但这似乎不是。

对 Effects 和 Observables 还很陌生，从我所遇到的情况来看，我没有找到任何答案。

只需要在另一个完成后触发一个。

编辑 1

所以 loadImages() 触发，一旦完成 API 调用，它就会触发 loadImagesSuccess()。我想我的目标是......

@Effect() uploadImages$ = this.actions$
  .ofType(ProjectActions.UPLOAD_IMAGES)
  .map(action => action.payload)
  .flatMap(project => this.service.uploadImages(project))
    .switchMap((project) => Observable.of(
      this.imageActions.loadImages(),
      this.imageActions.loadImagesSuccess(), 
      this.projectActions.uploadImagesSuccess(project),
  ));

在更一般的意义上，我将照片保存到 API 上的项目中。我想在 uploadImagesSuccess() 有效负载到达我的选择器之前刷新我的 ImageState，并且由于 ImageState 没有及时更新而具有未定义的图像路径。

编辑 2

我通过这个解决方案来使用 ForkJoin，https://github.com/ngrx/effects/issues/64

@Effect() uploadImages$ = this.actions$
  .ofType(ProjectActions.UPLOAD_IMAGES)
  .map(action => action.payload)
  .flatMap(project => {
    let projectInfo$ = this.projectService.uploadImages(project);
    let imageInfo$ = this.imageService.loadImages();

    return Observable.forkJoin(projectInfo$, imageInfo$);
  })
  .mergeMap((results: any[]) => {
    let myActions: any[] = [];
    let actionGenerators = [
      (data: any) => {
        return this.projectActions.uploadImagesSuccess(data);
      },
      (data: any) => {
        return this.imageActions.loadImagesSuccess(data);
      }
    ];

    results.forEach((data: any, index: number) => {
      myActions.push(actionGenerators[index](data));
    });

    return Observable.from(myActions);
  });

不确定这是否是解决此问题的最佳方法，但只要我延迟 API 调用以加载图像，它就可以工作。在没有延迟的情况下，在保存新图像之前加载图像。目前我正在 API 端延迟 loadImages()。

如果可能，我想要一种更好的方法来处理将 API 调用发送到 imageService.loadImages() 直到 projectService.uploadImages() 返回。然后在返回所有数据后，触发更新存储的操作。

建议使用 concat 而不是 forkJoin 以等待一个 API 调用完成，然后再继续下一个。但这会破坏 results.Foreach() 因为结果不再在数组中。

Answer 1

使用连接：

@Effect() uploadImages$ = this.actions$
  .ofType(ProjectActions.UPLOAD_IMAGES)
  .map(action => action.payload)
  .flatMap(project => this.service.uploadImages(project))
    .switchMap((project) => Observable.concat(
      this.imageActions.loadImages(),
      this.projectActions.uploadImagesSuccess(project),
    ));

或来自：

 @Effect() uploadImages$ = this.actions$
      .ofType(ProjectActions.UPLOAD_IMAGES)
      .map(action => action.payload)
      .flatMap(project => this.service.uploadImages(project))
        .switchMap((project) => Observable.from([
          this.imageActions.loadImages(),
          this.projectActions.uploadImagesSuccess(project)]
        ));

Answer 2

也许你可以试试这个。而不是使用加载图像操作，只需在上传图像副作用中执行加载图像 api 调用。像这样的：

@Effect() uploadImages$ = this.actions$
  .ofType(ProjectActions.UPLOAD_IMAGES)
  .map(action => action.payload)
  .mergeMap(project => this.service.uploadImages(project)
     .mergeMap(() => {
        return this.otherService.loadImages()
          .map((images) => this.projectActions.uploadImagesSuccess({ project: project, images: images))
      }
  ));

然后你可以通过监听 UPLOAD_IMAGES_SUCCESS 动作让两个 reducer 更新状态：

export default function ProjectReducer (state = initialState, action: Action) {
    switch (action.type) {
        case UPLOAD_IMAGES_SUCCESS:
            return // do your update with action.payload.project
        default:
            return state;
    }
};

export default function ImagesReducer (state = initialState, action: Action) {
    switch (action.type) {
        case UPLOAD_IMAGES_SUCCESS:
            return // do your update with action.payload.images
        default:
            return state;
    }
};

您可以在 ngrx 示例应用程序中看到相同的模式。在两个减速器中 ADD_TO_CART 正在被监听：

https://github.com/btroncone/ngrx-examples/blob/master/shopping-cart/src/app/reducers/products.ts

https://github.com/btroncone/ngrx-examples/blob/master/shopping-cart/src/app/reducers/cart.ts