[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()); } }
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(); } }
相关文章
- 新建maven指定jdk版本-eclipse新建maven项目报错The superclass "javax.servlet.http.HttpServlet" was not found on the Java Build Path的解决方案
- 【异常】The dependencies of some of the beans in the application context form a cycle
- [Angular] Define a custom Material theme
- [Angular] Difference between Providers and ViewProviders
- [Angular2 Router] Optional Route Query Parameters - The queryParams Directive and the Query Parameters Observable
- [Angular2 Form] Understand the Angular 2 States of Inputs: Pristine and Untouched
- [Angular 2] How To Debug An Angular 2 Application - Debugging via Augury or the Console
- [Angular 2] Rendering an Observable Date with the Async and Date Pipes
- [Angular 2] Using ng-model for two-way binding
- The total number of locks exceeds the lock table size错误(已纠正)
- [Angular] Extract Implementation Details of ngrx from an Angular Application with the Facade Pattern
- [Unit Testing] Configure the Angular CLI to use the Karma Mocha test reporter
- [Angular] The Select DOM Event and Enabling Text Copy
- [Angular2 Form] Understand the Angular 2 States of Inputs: Pristine and Untouched
- The CPU Costing Model: A Few Thoughts Part IV (Map of the Problematique)
- The data replication requires the processing of single BDoc instances
- Angular sort interactively test
- 如何使用 Angular 服务器端渲染的 Transfer State Service
- Angular Component TypeScript代码和最后转换生成的JavaScript代码比较
- NLP:LSTM之父眼中的深度学习十年简史《The 2010s: Our Decade of Deep Learning / Outlook on the 2020s》的参考文献
- 成功解决MSB8020 The build tools for v141 (Platform Toolset = ‘v141‘) cannot be found. To build using the
- chroumium electron apply_all_patches.py patch git error WindowsError: [Error 2] The system cannot find the file specified
- java.lang.IllegalStateException: The specified child already has a parent. You must call removeView() on the child's parent first.
- Warning:detected "cgroupfs" as the Docker cgroup driver. The recommended driver is "systemd".
- 【2023年4月美赛加赛】Z题:The Future of the Olympics 思路、建模方案、数据来源、相关资料
- 存在隐患 : 3 racks are required for the erasure coding policies: RS-6-3-1024k. The number of racks is on