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();
      }
    }
  • 相关阅读:
    HDU 5486 Difference of Clustering 图论
    HDU 5481 Desiderium 动态规划
    hdu 5480 Conturbatio 线段树 单点更新,区间查询最小值
    HDU 5478 Can you find it 随机化 数学
    HDU 5477 A Sweet Journey 水题
    HDU 5476 Explore Track of Point 数学平几
    HDU 5475 An easy problem 线段树
    ZOJ 3829 Known Notation 贪心
    ZOJ 3827 Information Entropy 水题
    zoj 3823 Excavator Contest 构造
  • 原文地址:https://www.cnblogs.com/Answer1215/p/10340294.html
Copyright © 2011-2022 走看看