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

bad.component.ts

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

effects.ts

setCurrentCourse$ = createEffect(() => this.actions$.pipe(
  ofType(ROUTER_NAVIGATED),             // get router navigated ngrx actions
  mergeMap(() => this.store.pipe(
    select(selectRouteParam(‘id’)))     // get the id from the router store
  ),
  map((id: string) => setIds({ id })),  // dispatch a new action to set the selected id
));

good.component.ts

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