根据有效载荷而不是效果取消可观察

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

您可以更改效果以分组检索营销内容，而不是专门取消效果，并且仍然利用switchMap取消后续请求。

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

在这种情况下，payload 将是要检索的内容名称数组，而不是允许您将内容作为组加载的单个名称。

Answer 2

如果您引入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 操作之前发送 CANCEL_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'));

---

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

您可以使用具有相同负载的相同操作的调度作为取消触发器。例如：

@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 来跳过当前由效果处理的动作。并且答案假定payload 是"A" 或"B" 等。