Effects for side effects in Angular - Mini Project: Build & Apply

Effects for Side Effects in Angular

📖 Scenario: You are building a simple Angular app that fetches a list of books from a server. You want to handle the side effect of loading books using Angular Effects.

🎯 Goal: Create an Angular effect to load books from a mock API and dispatch success or failure actions accordingly.

📋 What You'll Learn

Create an action to start loading books

Create success and failure actions for loading books

Create an effect that listens for the load action and calls a mock service

Dispatch success or failure actions based on the service response

💡 Why This Matters

🌍 Real World

Managing side effects like API calls in Angular apps is essential for clean, maintainable code and better user experience.

💼 Career

Understanding Angular Effects is important for frontend developers working with NgRx to handle asynchronous operations and state management.

1

Create the load books action

Create an action called loadBooks using createAction from '@ngrx/store' with the type '[Books] Load Books'.

Angular

// Your code here

Need a hint?

Use createAction to define a simple action without payload.

2

Create success and failure actions

Create two actions called loadBooksSuccess and loadBooksFailure using createAction. The success action should have a payload property books of type string[]. The failure action should have a payload property error of type string. Use types '[Books] Load Books Success' and '[Books] Load Books Failure' respectively.

Angular

import { createAction, props } from '@ngrx/store';

export const loadBooks = createAction('[Books] Load Books');

// Your code here

Need a hint?

Use props to define the payload shape for success and failure actions.

3

Create the books effect

Create an Angular injectable class called BooksEffects. Inject Actions and a mock service called BooksService in the constructor. Create an effect called loadBooks$ using createEffect that listens for loadBooks action, calls BooksService.getBooks(), and maps the result to loadBooksSuccess action or catches errors and maps to loadBooksFailure action.

Angular

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

// Your code here

Need a hint?

Use ofType to filter actions, mergeMap to call the service, and catchError to handle errors.

4

Register the effect in the module

In your Angular module, import EffectsModule from '@ngrx/effects' and register BooksEffects using EffectsModule.forRoot([BooksEffects]) in the imports array.

Angular

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { EffectsModule } from '@ngrx/effects';
import { BooksEffects } from './books.effects';

@NgModule({
  declarations: [],
  imports: [
    BrowserModule,
    // Your code here
  ],
  providers: [],
  bootstrap: []
})
export class AppModule {}

Need a hint?

Use EffectsModule.forRoot to register your effects in the root module.