NgRx 效果无限循环

Question

我知道这个问题已经在 SO 上被问过一百万次了。但我需要帮助。我确实意识到我一定在这里遗漏了一些重要的东西。但是我没看到。

下面的代码触发了一个无限循环。 REMOVE_PROJECT 仅被派送一次。 REMOVE_PROJECT_SUCCESS 正在无限触发。 'removed' 正在无限记录。我不知道为什么。

所有动作都有独特的类型。 dispatch: false 已启用 REMOVE_PROJECT_SUCCESS。

操作：

export const REMOVE_PROJECT = createAction(
    '[Project] Remove Project',
    props<{ id: string }>()
);

export const REMOVE_PROJECT_SUCCESS = createAction(
    '[Project] Remove Project Success',
);

效果：

@Effect()
removeProject$ = createEffect(() => this.actions$.pipe(
    ofType(ProjectActions.REMOVE_PROJECT),
    switchMap(props =>
        this.projects.removeProject(props.id).pipe(
           map(() => ({ type: '[Project] Remove Project Success'}),
        // have also tried
        // map(() => ProjectActions.REMOVE_PROJECT_SUCCESS())
        )
    ))
))


@Effect({ dispatch: false })
removeProjectSuccess$ = createEffect(() => this.actions$.pipe(
    ofType(ProjectActions.REMOVE_PROJECT_SUCCESS),
    tap(() => console.log('removed')),
))

删除函数:

removeProject(projectId): Observable<void> {
    return from(this.db.doc('projects/' + projectId).ref.delete());
}

Answer 1

这是因为您将 @Effect() 装饰器与 createEffect() 一起使用。他们都在引擎盖下做同样的事情，很可能触发无限循环。删除 @Effect() 注释（推荐）或 createEffect()（我会留下这个）。

更具体地说，createEffect() 还将 {dispatch: false} 作为第二个参数（在您的可观察管道之后）。由于您没有为第二个选项包含此选项，它只是重新调度您使用 ofType 过滤的操作，从而在您遇到的无限循环中一遍又一遍地触发相同的操作。

如果您不想调度，第二个效果应该是这样的：

removeProjectSuccess$ = createEffect(() => this.actions$.pipe(
    ofType(ProjectActions.REMOVE_PROJECT_SUCCESS),
    tap(() => console.log('removed')),
), { dispatch: false })

在幕后，装饰器和函数都向 EffectsModule 消耗的可注入 class 添加注释。在这种情况下，它会产生一个不会调度的效果，而第二个效果会默认调度。我希望这是有道理的。

NgRx 效果无限循环

NgRx Effects infinite loop

observable

ngrx

ngrx-effects

angular