What does Effect do?

AngularJunior~1 min read

Effect in NgRx is an action listener that reacts to them and performs side effects, for example:

sends an HTTP request,
writes to localStorage,
dispatches new actions based on the result.

It does not change the state directly. It simply "hears" the action and does something asynchronous.

Example:

The user clicks "log in":

this.store.dispatch(login({ email, password }));

The Effect "hears" this action:

login$ = createEffect(() =>
  this.actions$.pipe(
    ofType(login),
    switchMap(action =>
      this.authService.login(action.email, action.password).pipe(
        map(user => loginSuccess({ user })),
        catchError(() => of(loginFailure()))
      )
    )
  )
);

It calls authService.login(...), waits for the response, and dispatches loginSuccess or loginFailure.

What Effect does:

reacts to actions,
runs async operations (API calls, timers, requests),
sends new actions with the results.

Conclusion: Effect is the connecting link between actions and the outside world. If you need to step outside the store, it's always through it.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.

What does Effect do?

#Example:

Short Answer

Example: