NgRx - 减速器被无限次触发

问题描述

我正在尝试通过 NgRx 效果检索本地存储数据。调度 PATIENT_FETCH 操作以执行效果。但是在调用 ngOnInit 方法中的 dispatch 方法时会无限调用。

这是 stackblitz 演示。如果在给定链接的 patient.component.ts 中取消注释第 24 行，则 reducer 将被无限次调用。我可能在 NgRx 实现中遗漏了一些东西。

解决方法

问题在于效果。

 @Effect()
    patient: Observable<any> = this.actions.pipe(
        ofType(PatientActionTypes.PATIENT_FETCH),tap((action: ActionTemplate<PatientFetch>) => {
            const patient: any = this.storageService.get(STORAGE_KEY,{});
            return patientActionFactory.create<PatientFetchSuccess>(PatientActionTypes.PATIENT_FETCH_SUCCESS,patient);
        })
    );

上面不断地分派 PATIENT_FETCH 动作，并再次捡起它 - 导致无限循环。通过查看代码，您可能想要返回 PATIENT_FETCH_SUCCESS 操作。因此，您必须将 tap 运算符替换为 map 运算符。