避免使用@ngrx/effects 取消相同的操作

如何解决避免使用@ngrx/effects 取消相同的操作

有没有办法避免影响取消前一个？

我需要做的：

this.tagsstoreService.initTagsForFamilyId(this.tagFamily.id)

我有这个效果：

@Effect() initTagsForFamilyId$: Observable<Action> = this.actions$
    .pipe(
        ofType<InitTagsForFamilyIdAction>(TagsstateActionTypes.INIT_TAGS_FOR_FAMILY_ID_ACTION),switchMap(params => {
            // this.loadingService.showLoading();
            return this.tagsService.initTagsForFamilyId(params.payload)
                .pipe(
                    exhaustMap((data) => {
                        this.loadingService.hideLoading();

                        return [
                            new InitTagsForFamilyIdSuccessAction({ ...data }),];
                    }),catchError(error => {
                        // this.loadingService.hideLoading();
                        return of(new TagsFailureAction({ error }));
                    }),);
        }),);

预先感谢您的帮助;-)

解决方法

您应该使用 mergeMap 代替 switchMap

let {
  interval,of
} = rxjs
let {
take,tap,switchMap,delay,finalize
} = rxjs.operators

const switchMapCase = interval(500).pipe(
  take(5),tap(() => console.log("new request")),switchMap(() =>
    of(null).pipe(
      delay(800),tap(() => console.log("end")),finalize(() => console.log("request stream complete"))
    )
  )
);

switchMapCase.subscribe();

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.6.6/rxjs.umd.min.js"></script>

如果您运行上面的代码段（带有 switchMap 的代码段），您会注意到每 500 毫秒都会发出一个新事件（新请求），该事件将进入 {{1}并返回一个将在 switchMap ms 后解析的新 observable，因为在解析内部 observable 之前 800 > 800 新的 observable 将来自源流，这将取消当前内部流（具有 500 毫秒延迟的流）和一个也具有 800 毫秒延迟的新流将被返回。这件事会发生 5 次（由于 800 运算符，这相当于分派 take(5) 操作 5 次，每个 Dispathc 之间有 TagsStateActionTypes.INIT_TAGS_FOR_FAMILY_ID_ACTION 毫秒的延迟）。在第 5 次迭代中，内部 observable 将完成，因为不会有新的调度取消它。

let {
  interval,mergeMap,finalize
} = rxjs.operators

const mergeMapCase = interval(500).pipe(
  take(5),mergeMap(() =>
    of(null).pipe(
      delay(800),tap(() => console.log("server response recieved")),finalize(() => console.log("request stream complete"))
    )
  )
);

mergeMapCase.subscribe();

在上面的代码片段（<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.6.6/rxjs.umd.min.js"></script>）中，我们有几乎相同的结构，唯一的区别是我们使用 mergeMap 而不是 mergeMap，区别在于与 {{ 1}}（取消前一个流）switchMap 会将新的“innerStream”添加到源 observable 而不取消旧的。

*旁注：* 实际上在效果中被取消的不是 switchMap 或 mergeMap 而是 action 可观察的，完成后会触发另一个 effect。>