Suggest an edit

Improve this article

Refine the answer for “What does Effect do?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

`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:

1. The user clicks "log in":

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

2. The Effect "hears" this action:

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

3. 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.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts153 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.