NGRX Effect infinite loop

Question

I'm struggling with the implementation of Ngrx Effect (straight from the documenation). I'm always ending with an infinite loop :

  updateSomething$ = createEffect(() =>
    this.actions$.pipe(
      ofType(somActions.fetchUpdateSomething),
      mergeMap(() =>
        this.someService.fetchUpdateSomething().pipe(
          map(({ someData }) =>
            someOtherActions.theAction({
              payload: someData,
            })
          ),
          catchError(() => EMPTY)
        )
      )
    )
  );

The action I dispatch to trigger this comes from a component :

this.store.dispatch(somActions.fetchUpdateSomething());

The targeted action (somActions.fetchUpdateSomething) looks like this :

export const fetchUpdateSomething = createAction(
  SomeActionTypes.FETCH_UPDATE_SOMETHING
);

And the desired action to be triggered by the Effect :

export const theAction = createAction(
  SomeOtherActionTypes.UPDATE_SOMETHING,
  props<{ payload: someData }>()
);

I struggled hours yesterday on this. The action `theAction is stuck in an infinite loop. The reducer :

export const myReducer = createReducer(
  initialState,
  on(
    someOtherActions.theAction,
    (state, { payload }) => ({
      ...state,
      ...payload,
    })
  )
);

Any help will be welcomed, thank you.

Neovea Neovea · Accepted Answer · 2020-09-16T08:58:17

Actually I found the issue : It was in the service which, when retrieving the value in the store before performing the API call, caused the infinite loop.

NGRX Effect infinite loop

1 Answers