angular – 取消基于有效负载而非效果的可观察性

@Effect()
markeTingContent$= this.actions$
  .ofType(LOAD_MARKETinG_CONTENT)
  .switchMap(({ payload }) => this.markeTingservice.getContent(payload)
    .map(content => Action.LoadMarkeTingContentComplete(content))
  )

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

如果你引入了一个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)
    )
  );

从内存中,需要跳过跳过效果当前处理的操作.答案假设有效载荷是“A”或“B”等.