Effects for side effects in Angular

Introduction

Effects help you run extra code when something happens in your app, like loading data or saving info. They keep your app organized by handling these side tasks outside your main code.

When you want to fetch data from a server after a user clicks a button.

When you need to save user input to a database without blocking the app.

When you want to show a message after an action completes successfully.

When you need to log user actions for analytics without mixing it with UI code.

When you need to handle errors from server calls and show alerts.

Syntax

Angular

import { createEffect, ofType, Actions } from '@ngrx/effects';
import { Injectable } from '@angular/core';
import { map, mergeMap, catchError } from 'rxjs/operators';
import { of } from 'rxjs';

@Injectable()
export class MyEffects {
  myEffect$ = createEffect(() =>
    this.actions$.pipe(
      ofType('ACTION_TYPE'),
      mergeMap(() =>
        someServiceCall().pipe(
          map(data => ({ type: 'SUCCESS_ACTION', payload: data })),
          catchError(() => of({ type: 'FAILURE_ACTION' }))
        )
      )
    )
  );

  constructor(private actions$: Actions) {}
}

createEffect defines a side effect that listens to actions and can dispatch new actions.

ofType filters actions by their type so the effect reacts only to specific actions.

Examples

This effect listens for 'LOAD_DATA' action, calls an API, and dispatches success or failure actions.

Angular

myEffect$ = createEffect(() =>
  this.actions$.pipe(
    ofType('LOAD_DATA'),
    mergeMap(() => fetchDataFromApi().pipe(
      map(data => ({ type: 'LOAD_DATA_SUCCESS', payload: data })),
      catchError(() => of({ type: 'LOAD_DATA_FAILURE' }))
    ))
  )
);

This effect logs the user click action and dispatches a new action 'LOGGED_CLICK'.

Angular

logEffect$ = createEffect(() =>
  this.actions$.pipe(
    ofType('USER_CLICK'),
    map(action => {
      console.log('User clicked:', action);
      return { type: 'LOGGED_CLICK' };
    })
  )
);

This effect shows an alert but does not dispatch any new action (dispatch: false).

Angular

noDispatchEffect$ = createEffect(() =>
  this.actions$.pipe(
    ofType('SHOW_ALERT'),
    map(() => {
      alert('Alert shown!');
    })
  ), { dispatch: false }
);

Sample Program

This example shows an effect that listens for 'LOAD_FRUITS' action, fetches fruit data, and dispatches a success action with the fruit list.

Angular

import { Injectable } from '@angular/core';
import { createEffect, ofType, Actions } from '@ngrx/effects';
import { map, mergeMap, catchError } from 'rxjs/operators';
import { of } from 'rxjs';

// Simulated service that returns data
function fetchDataFromApi() {
  return of(['apple', 'banana', 'cherry']);
}

@Injectable()
export class FruitEffects {
  loadFruits$ = createEffect(() =>
    this.actions$.pipe(
      ofType('LOAD_FRUITS'),
      mergeMap(() =>
        fetchDataFromApi().pipe(
          map(fruits => ({ type: 'LOAD_FRUITS_SUCCESS', payload: fruits })),
          catchError(() => of({ type: 'LOAD_FRUITS_FAILURE' }))
        )
      )
    )
  );

  constructor(private actions$: Actions) {}
}

const actions$ = of({ type: 'LOAD_FRUITS' });
const effects = new FruitEffects(actions$);
effects.loadFruits$.subscribe(action => console.log(JSON.stringify(action)));

Important Notes

Effects run outside your components to keep UI code clean and focused.

Always handle errors in effects to avoid app crashes.

Use dispatch: false if your effect does not send new actions.

Summary

Effects handle side tasks like data loading or logging outside components.

They listen for actions and can dispatch new actions based on results.

Use effects to keep your app organized and responsive.

Practice

1. What is the main purpose of Effects in Angular applications?

easy

A. To define routes in the application

B. To style components dynamically

C. To handle side tasks like data fetching or logging outside components

D. To manage component templates

Solution

1. Step 1: Understand the role of Effects

   Effects are designed to handle side effects such as data fetching or logging, which are tasks outside the component's direct responsibilities.

2. Step 2: Compare with other options

   Styling, template management, and routing are handled by other Angular features, not Effects.

3. Final Answer:

   To handle side tasks like data fetching or logging outside components -> Option C

4. Quick Check:

   Effects = side tasks handler [OK]

Hint: Effects manage side tasks outside components [OK]

Common Mistakes:

• Confusing Effects with component styling
• Thinking Effects manage routing
• Assuming Effects handle templates

2. Which of the following is the correct way to create an effect using Angular's createEffect function?

easy

A. const loadData$ = createEffect(() => { this.actions$.pipe(ofType(load), switchMap(() => fetchData())); });

B. const loadData$ = createEffect(() => this.actions$.pipe(ofType(load), switchMap(() => fetchData())));

C. const loadData$ = createEffect(this.actions$.pipe(ofType(load), switchMap(() => fetchData())));

D. const loadData$ = createEffect(() => this.actions$.pipe(ofType(load), map(() => fetchData())));

Solution

1. Step 1: Check the syntax of createEffect

   The createEffect function expects a function returning an observable, so it should be () => this.actions$.pipe(...).

2. Step 2: Verify operators used

   Using switchMap is correct for side effects that return new observables. const loadData$ = createEffect(() => this.actions$.pipe(ofType(load), switchMap(() => fetchData()))); uses this correctly.

3. Final Answer:

   const loadData$ = createEffect(() => this.actions$.pipe(ofType(load), switchMap(() => fetchData()))); -> Option B

4. Quick Check:

   createEffect needs a function returning observable [OK]

Hint: createEffect needs a function returning an observable [OK]

Common Mistakes:

• Passing observable directly instead of a function
• Using map instead of switchMap for async calls
• Not returning the observable inside createEffect

3. Given this effect code snippet:

loadData$ = createEffect(() => this.actions$.pipe(
  ofType(loadData),
  switchMap(() => this.api.getData()),
  map(data => loadDataSuccess({ data })),
  catchError(() => of(loadDataFailure()))
));

What happens when the loadData action is dispatched?

medium

A. The API call is ignored and no action is dispatched

B. The effect causes a syntax error and stops

C. Only loadDataFailure action is dispatched immediately

D. The API call is made, and on success, loadDataSuccess action is dispatched

Solution

1. Step 1: Understand the effect flow

   When loadData action is dispatched, the effect listens and triggers the API call via switchMap.

2. Step 2: Analyze success and error handling

   On success, map dispatches loadDataSuccess with data; on error, catchError dispatches loadDataFailure.

3. Final Answer:

   The API call is made, and on success, loadDataSuccess action is dispatched -> Option D

4. Quick Check:

   Effect triggers API and dispatches success or failure [OK]

Hint: Effects dispatch success or failure actions after API calls [OK]

Common Mistakes:

• Assuming no action is dispatched after API call
• Confusing map with catchError behavior
• Thinking effect causes syntax error

4. Identify the error in this effect code:

saveData$ = createEffect(() => this.actions$.pipe(
  ofType(saveData),
  switchMap(action => this.api.save(action.payload)),
  map(() => saveDataSuccess()),
  catchError(error => saveDataFailure({ error }))
));

medium

A. The catchError operator should return an observable

B. The switchMap should not use action parameter

C. The map operator must return the original action

D. The effect should not use createEffect function

Solution

1. Step 1: Check catchError usage

   The catchError operator must return an observable, but here it returns an action object directly.

2. Step 2: Correct catchError return

   Wrapping the action in of() makes it an observable, fixing the error.

3. Final Answer:

   The catchError operator should return an observable -> Option A

4. Quick Check:

   catchError must return observable [OK]

Hint: Always wrap catchError return in of() to return observable [OK]

Common Mistakes:

• Returning plain object instead of observable in catchError
• Misusing switchMap parameters
• Thinking map must return original action

5. You want to create an effect that listens for login actions, calls an API to authenticate, and then dispatches either loginSuccess or loginFailure. Additionally, you want to log every login attempt regardless of success or failure. Which approach correctly implements this using Angular Effects?

hard

A. Use two separate effects: one for API call with dispatch, another for logging with dispatch: false

B. Use one effect with switchMap for API call and tap for logging inside the same pipe

C. Use one effect with map for API call and catchError for logging

D. Use one effect with filter to block logging and API call

Solution

1. Step 1: Separate concerns for side effects

   Logging is a side effect that does not dispatch actions, so it should be in a separate effect with dispatch: false.

2. Step 2: API call effect dispatches success or failure

   The main effect handles the API call and dispatches loginSuccess or loginFailure accordingly.

3. Step 3: Final design

   Two effects keep code clean and responsibilities clear: one for API calls with dispatch, one for logging without dispatch.

4. Final Answer:

   Use two separate effects: one for API call with dispatch, another for logging with dispatch: false -> Option A

5. Quick Check:

   Separate effects for dispatching and logging [OK]

Hint: Use separate effects for dispatching and non-dispatching tasks [OK]

Common Mistakes:

• Combining logging and dispatching in one effect incorrectly
• Using map instead of switchMap for API calls
• Forgetting dispatch: false for logging effect