ngrx effects called multiple times after it return the value

Question

ngrx effects called multiple times after it return the value.

loadMovies$: Observable<Action> = createEffect(() => {
    return this.actions$.pipe(
    ofType(counterActions.CounterActionTypes.IncrementCounter),
    flatMap(() => {
        return this.userService.counter()
        .pipe(
          map(movies => {
             return new counterActions.IncrementCounter();
          }));
      }
    ));
  });

Answer 1

You should add dispatch: false to your effect

  loadMovies$ = createEffect(() => {
    this.actions$.pipe(
    ofType(counterActions.CounterActionTypes.IncrementCounter),
    flatMap(() => {
        return this.userService.counter()
        .pipe(
          map(movies => {
             return new counterActions.IncrementCounter();
          }));
      }
    )),
    { dispatch: false };
  });

Example from document

  logActions$ = createEffect(() =>
    this.actions$.pipe(
      tap(action => console.log(action))
    ), { dispatch: false });

Answer 2

👋 it's not the first time I've seen this issue pop up, as it's an easy-to-make-and-overlook one.

That's why I added a rule for it in ngrx-tslint-rules to prevent it in the future.

Answer 3

Because of createEffect function. You should remove wrapper createEffect function and just use this.actions$.pipe, instead. That will fix your issue. I already did and now it works okay.

loadMovies$ = this.actions$.pipe(
    ofType(counterActions.CounterActionTypes.IncrementCounter),
    flatMap(() => {
        return this.userService.counter()
          .pipe(
              map(movies => {
                  return new counterActions.IncrementCounter();
              })
          );
    })
);