[Angular] Extract Implementation Details of ngrx from an Angular Application with the Facade Pattern

Posted 2021-02-07 Answer1215

Extracting away the implementation details of ngrx from your components using the facade pattern creates some interesting possibilities in terms of iteratively migrating an application to ngrx. By decoupling your components from ngrx completely, this also makes testing and collaboration a lot easier. In this lesson, we will finalize our application by creating a facade to sit in between our component and ngrx and hide all of the ngrx implementation details away from our component. This has an added benefit of reducing the number of pieces that we need to export in our state module‘s barrel roll by reducing our dependency down to a single facade.

 

Current we have the component code like this.. we want to extract implementation detail into facade partten.

component:

import { Component, Input, OnInit, ChangeDetectionStrategy } from ‘@angular/core‘;
import { Observable } from ‘rxjs‘;

import {Role} from ‘../stores/models‘;
import { Store, select } from ‘@ngrx/store‘;
import { DashbaordState, selectAllRoles, LoadRoles } from ‘../stores‘;

@Component({
  selector: ‘dashboard‘,
  templateUrl: ‘./dashboard.component.html‘,
  styleUrls: [‘./dashboard.component.scss‘],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class DashboardComponent implements OnInit {

  roles$: Observable<Role[]>;
  constructor(
    private store: Store<DashbaordState>
  ) {
    this.roles$ = this.store.pipe(
      select(selectAllRoles)
    );
  }

  ngOnInit() {
    this.store.dispatch(new LoadRoles());
  }

}

 

Create a facade.ts file:

import { Injectable } from "@angular/core";
import { Store, select } from ‘@ngrx/store‘;
import { DashbaordState } from ‘../reducers‘;
import { Observable } from ‘rxjs‘;
import { Role } from ‘../models‘;
import { selectAllRoles } from ‘../selectors‘;
import { LoadRoles } from ‘../actions‘;

@Injectable({
    providedIn: ‘root‘
})
export class DashboardFacade {
    roles$: Observable<Role[]>;
    constructor(
        private store: Store<DashbaordState>
    ) {
        this.roles$ = store.pipe(
            select(selectAllRoles)
          );
    }

    getRoles () {
        this.store.dispatch(new LoadRoles());
    }
}

Basiclly just move all the Store related code to the facede service.

 

Update the component:

import { Component, Input, OnInit, ChangeDetectionStrategy } from ‘@angular/core‘;
import { Observable } from ‘rxjs‘;

import {Role} from ‘../stores/models‘;
import { Store, select } from ‘@ngrx/store‘;
import { DashbaordState, selectAllRoles, LoadRoles } from ‘../stores‘;
import { DashboardFacade } from ‘../stores/facades/dashboard.facade‘;

@Component({
  selector: ‘dashboard‘,
  templateUrl: ‘./dashboard.component.html‘,
  styleUrls: [‘./dashboard.component.scss‘],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class DashboardComponent implements OnInit {

  roles$: Observable<Role[]>;

  constructor(
    private facade: DashboardFacade
  ) {
    this.roles$ = this.facade.roles$;
  }

  ngOnInit() {
    this.facade.getRoles();
  }
}