Our content is free thanks to ag-Grid

ag-Grid is the industry leading JavaScript datagrid

ag-grid.com

NGRX | Use effects and router-store to isolate route related side effects.

Post Editor

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.

1 min read
post

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.

post
post
1 min read
1 min read

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 here.

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},
  );

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 switchMap 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.

Discuss with community

Share

About the author

author_image
Adam Genshaft

For the past several years I've got the chance to work as a JavaScript developer for industry leaders in different fields.

author_image

About the author

Adam Genshaft

For the past several years I've got the chance to work as a JavaScript developer for industry leaders in different fields.

About the author

author_image
Adam Genshaft

For the past several years I've got the chance to work as a JavaScript developer for industry leaders in different fields.

NxAngularCli
NxAngularCli
NxAngularCli

Featured articles

RxJSpost
21 January 20214 min read
RxJS in Angular: Part III

In my previous two articles we have discussed how to change our components which solve problems in imperative ways to do that in functional, reactive, RxJS way, and we of course had a lot of fun doing that.

RxJSpost
21 January 20214 min read
RxJS in Angular: Part III

In my previous two articles we have discussed how to change our components which solve problems in imperative ways to do that in functional, reactive, RxJS way, and we of course had a lot of fun doing that.

Read more
RxJSpostRxJS in Angular: Part III

21 January 2021

4 min read

In my previous two articles we have discussed how to change our components which solve problems in imperative ways to do that in functional, reactive, RxJS way, and we of course had a lot of fun doing that.

Read more
Angularpost
20 January 20216 min read
Angular and SOLID principles

In software engineering, making things work the first time is always easy. But, what if you want to add new functionalities to an existing code? Making iterations on an existing basis can be difficult to do without introducing bugs. This is where SOLID principles come into play.

Angularpost
20 January 20216 min read
Angular and SOLID principles

In software engineering, making things work the first time is always easy. But, what if you want to add new functionalities to an existing code? Making iterations on an existing basis can be difficult to do without introducing bugs. This is where SOLID principles come into play.

Read more
AngularpostAngular and SOLID principles

20 January 2021

6 min read

In software engineering, making things work the first time is always easy. But, what if you want to add new functionalities to an existing code? Making iterations on an existing basis can be difficult to do without introducing bugs. This is where SOLID principles come into play.

Read more
Angularpost
14 January 20216 min read
Demystifying Taiga UI root component: portals pattern in Angular

Just before new year we announced our new Angular UI kit library Taiga UI. If you go through Getting started steps, you will see that you need to wrap your app with the tui-root component. Let's see what it does and explore what portals are and how and why we use them.