NgRx - reducer is being triggered for infinite times

Question

I am trying to retrieve local storage data via NgRx effect. PATIENT_FETCH action is dispatched to execute an effect. But having an infinite call upon calling the dispatch method in ngOnInit method.

Here is the stackblitz demo. If you uncomment line 24 in patient.component.ts of given link then reducer is called for infinite times. I might be missing something in NgRx implementation.

timdeschryver timdeschryver · Accepted Answer · 2021-01-25T20:00:07

The problem is the Effect.

 @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);
        })
    );

The above keeps dispatching the PATIENT_FETCH action, and picks it up again - resulting in an infite loop. From looking at the code you probably want to return the PATIENT_FETCH_SUCCESS action. Therefore, you must replace the tap operator with the map operator.

NgRx - reducer is being triggered for infinite times

1 Answers