@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

The sources for this package are in the main NgRx repo. Please file issues and pull requests against that repo.

License: MIT

Changelog

6.0.0-beta.0 (2018-03-31)

Bug Fixes

• Entity: Change EntityAdapter upsertOne/upsertMany to accept an entity (a0f45ff)
• RouterStore: Allow strict mode with router reducer (#903) (f17a032)
• RouterStore: change the default serializer to work around cycles in RouterStateSnapshot (7917a27)
• RouterStore: Replace RouterStateSnapshot with SerializedRouterStateSnapshot (bd415a1)
• StoreDevtools: pass timestamp to actions (df2411f)
• StoreDevtools: report errors to ErrorHandler instead of console (32df3f0)
• Add support for Angular 6 and RxJS 6 (d1286d2)

Features

• Schematcis: Extend from @schematics/angular (0e17aad)
• Schematics: Add support for custom store interface name (#810) (1352d83)

BREAKING CHANGES

• StoreDevtools: Errors in reducers are no longer hidden from ErrorHandler by StoreDevtools

BEFORE:

Errors in reducers are caught by StoreDevtools and logged to the console

AFTER:

Errors in reducers are reported to ErrorHandler

• Schematcis: NgRx Schematics now has a minimum version dependency on @angular-devkit/core and @angular-devkit/schematics of v0.4.0.
• RouterStore: Default router state is serialized to a shape that removes cycles

BEFORE:

Full RouterStateSnapshot is returned

AFTER:

Router state snapshot is returned as a SerializedRouterStateSnapshot with cyclical dependencies removed

• Entity: The signature of the upsertOne/upsertMany functions in the EntityAdapter has been changed to accept a fully qualified entity instead of an update object that implements the Update<T> interface.

  Before:

  entityAdapter.upsertOne(
    {
      id: 'Entity ID',
      changes: { id: 'Entity ID', name: 'Entity Name' },
    },
    state
  );
  

  After:

  entityAdapter.upsertOne(
    {
      id: 'Entity ID',
      name: 'Entity Name',
    },
    state
  );
  

• NgRx now has a minimum version requirement on Angular 6 and RxJS 6.

<a name="5.2.0"></a>