@ngrx/effects

What is @ngrx/effects?

@ngrx/effects is a library for managing side effects in Angular applications using the Redux pattern. It allows you to isolate side effects from your components and services, making your code more predictable and easier to test.

What are @ngrx/effects's main functionalities?

Handling Side Effects

This code demonstrates how to handle side effects using @ngrx/effects. The `loadItems$` effect listens for the `loadItems` action, calls a service to fetch data, and then dispatches either a success or failure action based on the result.

import { Injectable } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { of } from 'rxjs';
import { catchError, map, mergeMap } from 'rxjs/operators';
import { MyService } from './my-service';
import * as MyActions from './my-actions';

@Injectable()
export class MyEffects {
  loadItems$ = createEffect(() => this.actions$.pipe(
    ofType(MyActions.loadItems),
    mergeMap(() => this.myService.getAll().pipe(
      map(items => MyActions.loadItemsSuccess({ items })),
      catchError(() => of(MyActions.loadItemsFailure()))
    ))
  ));

  constructor(
    private actions$: Actions,
    private myService: MyService
  ) {}
}

Combining Multiple Effects

This code demonstrates how to combine multiple effects in a single class. The `loadItems$` effect handles loading items, while the `updateItem$` effect handles updating an item. Both effects listen for their respective actions and call the appropriate service methods.

import { Injectable } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { of } from 'rxjs';
import { catchError, map, mergeMap } from 'rxjs/operators';
import { MyService } from './my-service';
import * as MyActions from './my-actions';

@Injectable()
export class MyEffects {
  loadItems$ = createEffect(() => this.actions$.pipe(
    ofType(MyActions.loadItems),
    mergeMap(() => this.myService.getAll().pipe(
      map(items => MyActions.loadItemsSuccess({ items })),
      catchError(() => of(MyActions.loadItemsFailure()))
    ))
  ));

  updateItem$ = createEffect(() => this.actions$.pipe(
    ofType(MyActions.updateItem),
    mergeMap(action => this.myService.update(action.item).pipe(
      map(() => MyActions.updateItemSuccess({ item: action.item })),
      catchError(() => of(MyActions.updateItemFailure()))
    ))
  ));

  constructor(
    private actions$: Actions,
    private myService: MyService
  ) {}
}

Error Handling

This code demonstrates how to handle errors in effects. The `loadItems$` effect catches any errors that occur during the service call and dispatches a `loadItemsFailure` action with the error information.

import { Injectable } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { of } from 'rxjs';
import { catchError, map, mergeMap } from 'rxjs/operators';
import { MyService } from './my-service';
import * as MyActions from './my-actions';

@Injectable()
export class MyEffects {
  loadItems$ = createEffect(() => this.actions$.pipe(
    ofType(MyActions.loadItems),
    mergeMap(() => this.myService.getAll().pipe(
      map(items => MyActions.loadItemsSuccess({ items })),
      catchError(error => of(MyActions.loadItemsFailure({ error })))
    ))
  ));

  constructor(
    private actions$: Actions,
    private myService: MyService
  ) {}
}

Other packages similar to @ngrx/effects

redux-saga

redux-saga is a library that aims to make side effects (e.g., asynchronous actions like data fetching) easier and more manageable in Redux applications. It uses generator functions to handle side effects, which can make the code more readable and easier to test compared to @ngrx/effects.

redux-thunk

redux-thunk is a middleware that allows you to write action creators that return a function instead of an action. This function can then perform asynchronous dispatches. While simpler than @ngrx/effects, it can become harder to manage as the complexity of side effects grows.

mobx

MobX is a state management library that makes it simple to connect the reactive data of your application with the UI. Unlike @ngrx/effects, MobX uses observables to manage state and side effects, which can be more intuitive for some developers.

README

@ngrx/effects

Side effect model for @ngrx/store

Installation

To install @ngrx/effects from npm:

npm install @ngrx/effects --save

Example Application

https://github.com/ngrx/example-app

Effects

In @ngrx/effects, effects are sources of actions. You use the @Effect() decorator to hint which observables on a service are action sources, and @ngrx/effects automatically merges your action streams letting you subscribe them to store.

To help you compose new action sources, @ngrx/effects exports an Actions observable service that emits every action dispatched in your application.

Example

1. Create an AuthEffects service that describes a source of login actions:

import { Injectable, OnDestroy } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Subscription } from 'rxjs/Subscription';
import { Action, Store } from '@ngrx/store';
import { Actions, Effect, mergeEffects } from '@ngrx/effects';

@Injectable()
export class AuthEffects implements OnDestroy {
  subscription: Subscription;

  constructor(
    private http: Http,
    private actions$: Actions,
    private store: Store<State>
  ) {
    // Merge all effects and subscribe them to the store
    this.subscription = mergeEffects(this).subscribe(store);
  }

  @Effect() login$ = this.actions$
      // Listen for the 'LOGIN' action
      .ofType('LOGIN')
      // Map the payload into JSON to use as the request body
      .map(action => JSON.stringify(action.payload))
      .switchMap(payload => this.http.post('/auth', payload)
        // If successful, dispatch success action with result
        .map(res => ({ type: 'LOGIN_SUCCESS', payload: res.json() }))
        // If request fails, dispatch failed action
        .catch(() => Observable.of({ type: 'LOGIN_FAILED' }));
      );

  // You MUST implement an ngOnDestroy method for your effects to
  // automatically start. Use ngOnDestroy to cleanup running effects.
  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

1. Provide your service in your component's providers array or in an NgModule providers array to automatically start your effects:

import { AuthEffects } from './effects/auth';

@NgModule({
  providers: [ AuthEffects ]
})
export class AppModule { }

Testing Effects

WIP

Changelog

12.0.0-rc.0 (2021-05-05)

<a name="12.0.0-beta.1"></a>