Search code examples
angularrxjsobservablengrx

Are ngrx effects triggered again after state updates?

In my Angular project I have this ngrx effect, which triggers a new SearchAction:

createSearchWithNewLimit$ = createEffect(() => {
    return this.actions$.pipe(
      ofType(pageLimitChangedAction),
      concatLatestFrom(() => [this.store.select(selectSearchParams)]),
      switchMap(([{limit}, currSearchParams]) => {
        if(currSearchParams) {

          const searchParams = { ...currSearchParams, limit};

          return of(searchAction({searchParams}));
        }
        return EMPTY;
      })
    )
  })

Additionally, The SearchAction reducer updates the searchParams in the state (the one that is being retrieved in this effect in this.store.select(selectSearchParams)).

Does this mean that each time the SearchAction is dispatched, this effect will be triggered since it is using this.store.select(selectSearchParams)? and if so, how would this not cause an infinite loop? Or is it evaluated only once? Thanks

Solution

  • concatLatestFrom reads the current value from the store and passes that value down to the next operator. It won't retrigger the effect when it's value is changed.

    It's comparable with RxJS's withLatestFrom operator, with the difference that concatLatestFrom is lazily evaluated.

    For more info see the docs:

    Note: For performance reasons, use a flattening operator like concatLatestFrom to prevent the selector from firing until the correct action is dispatched.