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();
      }
    }
  • 相关阅读:
    JAVA生成问答式验证码图片,支持加减算法
    kaptcha Java验证码
    字母数字、字母、汉字验证码 (java)
    java实现点击图片文字验证码
    java随机生成字符串(字符随机生成类 生成随机字符组合)
    分布式和集群的区别
    【nginx】配置Nginx实现负载均衡
    【Tomcat】一台电脑上运行多个tomcat
    【nginx+tomcat集群】Nginx1.12.2+Tomcat7集群+负载均衡+Session共享
    【nginx】nginx的安装及测试
  • 原文地址:https://www.cnblogs.com/Answer1215/p/10340294.html
Copyright © 2011-2022 走看看