zoukankan      html  css  js  c++  java
  • [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();
      }
    }
  • 相关阅读:
    北漂IT男返乡2年的三线楼市观察(宜昌夷陵篇)-原创
    写一本书作者到底能拿到多少稿酬?
    书是如何定价的?
    一本书出版社拿多少,作者拿多少?书的成本几何?出版一本书出版社到底能赚多少钱?(转)
    微服务架构最强详解
    今日头条号短视频自媒体研究---最开始的短视频设备资金投入不要太大(原创)
    今日头条号短视频自媒体研究---新手上路,正确拍短视频并上传(原创)
    HTTP请求中的缓存(cache)机制
    linux kernel 中断子系统之(一)-- ARM GIC 硬件【转】
    嵌入式Linux——kmsg:分析/proc/kmsg文件以及写自己的/proc/mymsg【转】
  • 原文地址:https://www.cnblogs.com/Answer1215/p/10340294.html
Copyright © 2011-2022 走看看