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

男儿欲遂平生志，六经勤向窗前读。这篇文章主要讲述[Angular] Extract Implementation Details of ngrx from an Angular Application with the Facade Pattern相关的知识，希望能为你提供帮助。
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()); } }

【[Angular] Extract Implementation Details of ngrx from an Angular Application with the Facade Pattern】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(); } }