angular - 基于有效载荷而不是效果取消可观察

Question

我有一项服务向我无法控制的后端发出 http 请求以获取营销页面内容。有时，我需要同时加载多个营销内容。我可以创建调用该服务的效果。

@Effect()
marketingContent$ = this.actions$
  .ofType(LOAD_MARKETING_CONTENT)
  .switchMap(({ payload }) => this.marketingService.getContent(payload)
    .map(content => Action.LoadMarketingContentComplete(content))
  )

这很好用，我可以调用 store.dispatch(Action.LoadMarketingContent('A'))。

问题是，如果我需要一次加载多个营销内容，.switchMap 将取消之前的请求。

store.dispatch(Action.LoadMarketingContent('A'));
store.dispatch(Action.LoadMarketingContent('B'));
// Only `'B'` is loaded since 'A' gets canceled before it completes

我可以使用 .mergeMap 代替 .switchMap，但是重复的请求不会被取消。

我还可以使用单独的操作来加载每部分营销内容，但这需要为每部分创建一个操作和效果。

有没有一种方法可以让我使用 .switchMap 只取消对相同内容的请求(其中 payload 相同？)或另一种方法来同时进行不同请求同时取消同一流中的重复请求？

Answer 1

如果您引入一个CANCEL_MARKETING_CONTENT 操作，您可以使用mergeMap 执行类似的操作:

@Effect()
marketingContent$ = this.actions$
  .ofType(LOAD_MARKETING_CONTENT)
  .mergeMap(({ payload }) => this.marketingService
    .getContent(payload)
    .map(content => Action.LoadMarketingContentComplete(content))
    .takeUntil(this.actions$.ofType(CANCEL_MARKETING_CONTENT))
  );

基本上，您可以根据需要加载任意数量的营销内容，但您可以在发送 >LOAD_MARKETING_CONTENT 操作。

例如，要只加载 A 片段，您可以这样做:

store.dispatch(Action.CancelMarketingContent());
store.dispatch(Action.LoadMarketingContent('A'));

要同时加载 A 和 B，您可以这样做:

store.dispatch(Action.CancelMarketingContent());
store.dispatch(Action.LoadMarketingContent('A'));
store.dispatch(Action.LoadMarketingContent('B'));

---

实际上，有一种类似但更简洁的方法，它不涉及使用其他操作。

您可以使用与取消触发器相同的负载来分派(dispatch)相同的操作。例如:

@Effect()
marketingContent$ = this.actions$
  .ofType(LOAD_MARKETING_CONTENT)
  .mergeMap(({ payload }) => this.marketingService
    .getContent(payload)
    .map(content => Action.LoadMarketingContentComplete(content))
    .takeUntil(this.actions$
      .ofType(LOAD_MARKETING_CONTENT)
      .skip(1)
      .filter(({ payload: next }) => next === payload)
    )
  );

根据内存，将需要skip 来跳过当前正在由效果处理的 Action 。答案假设 payload 是 "A" 或 "B" 等。