NGRX | Use effects and router-store to isolate route related side 🧙🏼‍♂️ effects

One of the major advantages of ngrx is that we can isolate side effects from the components.

When we need to have router related data on the component we'll usually use the ActivatedRoute service from the component itself. For example, we can get the id from a route using this technique:

export class MyComponent {
  id: string;
  id$ = this.activatedRoute.params.pipe(
    map(params => params.id),
    tap(id => this.id = id),
  );
}

Let's isolate this using @ngrx/effects. The first goal is to get the route param from the URL.

How not to do it

We might be tempted to try using the ActivatedRoute service on the effects, but it's useless. It's only accessible on the "associated with a component loaded in an outlet", quoted from https://angular.io/api/router/ActivatedRoute.

Another thing we might think of is to use the Router service. But again we won't have the url parameter accessible in a clear, easy to use way.

What we can do, is to use selectRouteParam state selector from @ngrx/router-store.

Let's dive into the example. (stackblitz link at the bottom of the article)

How it's done right

Setting up the effect:

  setCurrentCourse$ = createEffect(() => this.store$.pipe(
    select(selectRouteParam('id')))
      .pipe(
        map((id: string) => setIds({id})), // dispatch a new action to set the selected id
      ),
    {dispatch: true},
  );

Kudos for @timdeschryver for the simplified version 🤘🏼

Then our component can be as simple as:

import { Store, select } from '@ngrx/store';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `{{selectedId$ | async | json}}`,
})
export class HomeComponent {
  selectedId$ = this.store.pipe(select((state: any) => state.featureName.selectedId));
  constructor(
    private store: Store,
  ) { }
}

The takeaways

That a basic example showing just how to get a param. The real power comes when we need to use that param and fetch some data with it. Then we'll have an effect where we'll use the mergeMap operator to fetch the data using this id from the URL. On the component, we'll just subscribe to the fetched data, and that's it.

If you liked it, please show me some love here or on my twitter @AdamGenshaft.

Comments

[Tim Deschryver]

Woo-hoo effects!
This can be made a little bit easier imho by just using the id selector as the source of the effect

 setCurrentCourse$ = createEffect(() => this.store.pipe(select(selectRouteParam('id') as any)))
  .pipe(
     map((id: string) => setIds({ id })), // dispatch a new action to set the selected id
   ), { dispatch: true });

[Adam Genshaft]

Effects are magical, are they :)

Thanks, I agree with you so I updated the example 🚀