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();
}
}

[Angular] Extract Implementation Details of ngrx from an Angular Application with the Facade Pattern的更多相关文章

  1. Accessor Search Implementation Details

    [Accessor Search Implementation Details] Key-value coding attempts to use accessor methods to get an ...

  2. 17.2.1 Replication Implementation Details 复制实现细节:

    17.2 Replication Implementation 复制是基于master server 跟踪所有改变到他的数据库(更新,删除等等)在它的binary log. binary log 作为 ...

  3. NgRx/Store 4 + Angular 5使用教程

    这篇文章将会示范如何使用NgRx/Store 4和Angular5.@ngrx/store是基于RxJS的状态管理库,其灵感来源于Redux.在NgRx中,状态是由一个包含action和reducer ...

  4. [Angular] Improve Server Communication in Ngrx Effects with NX Data Persistence in Angular

    Communicating with a remote server via HTTP presents an extra level of complexity as there is an inc ...

  5. Angular应用架构设计-3:Ngrx Store

    这是有关Angular应用架构设计系列文章中的一篇,在这个系列当中,我会结合这近两年中对Angular.Ionic.甚至Vuejs等框架的使用经验,总结在应用设计和开发过程中遇到的问题.和总结的经验, ...

  6. angular的跨域(angular百度下拉提示模拟)和angular选项卡

    1.angular中$http的服务: $http.get(url,{params:{参数}}).success().error(); $http.post(url,{params:{参数}}).su ...

  7. angular 2+ 变化检测系列三(Zone.js在Angular中的应用)

    在系列一中,我们提到Zone.js,Zones是一种执行上下文,它允许我们设置钩子函数在我们的异步任务的开始位置和结束位置,Angular正是利用了这一特性从而实现了变更检测. Zones.js非常适 ...

  8. 【Angular JS】正确调用JQuery与Angular JS脚本 - 修复Warning: Tired to load angular more than once

    自己正在做一个小网站,使用Angular JS + Express JS + Mongo DB,在开发过程中,遇到一些问题,所以整理出来.希望对大家都有帮助. 这是今天解决的一个问题,Angular ...

  9. [Angular] Step-By-Step Implementation of a Structural Directive - Learn ViewContainerRef

    For example we have two buttons: When we click nether one of those tow button, the modal should show ...

随机推荐

  1. JavaSwing 版本的简单扫雷游戏

    JavaSwing 版本的简单扫雷游戏 一.扫雷游戏的基本规则 1.扫雷游戏分为初级.中级.高级和自定义四个级别. 单击游戏模式可以选择"初级"."中级".&q ...

  2. php 通过类名获取类的文件地址

    $reflector = new ReflectionClass("Child"); $fn = $reflector->getFileName(); return dirn ...

  3. js判断上传图片宽高及文件大小

    <input id="file" type="file"> <input id="Button1" type=" ...

  4. EL使用技巧

    ☞控制页面元素显示与否 实现效果: 实现方案: ...... <div style="display:${empty param.hideTitle ? 'auto' : 'none' ...

  5. 第5天:Ansible-Playbook

    Ansible中的每个模块专注于某一方面的功能.虽然每个模块实现的功能都比较简单,但是,将各个模块结合起来就可以实现比较复杂的功能.在Ansible中,将各个模块组合起来的文件是一个YAML格式的配置 ...

  6. JZYZOJ1349 SPOJ839 星屑幻想 xor 网络流 最大流

    http://172.20.6.3/Problem_Show.asp?id=1349 调了两个小时发现数组开小了[doge].题意:给出几个点,有的点的权值确定,连接两点的边的权值为两点值的异或和,求 ...

  7. wannafly挑战赛14

    第一次打wannafly..觉得自己好菜啊... 题目描述 在三维空间中,平面 x = 0, y = 0, z = 0,以及平面 x + y + z = K 围成了一个三棱锥. 整天与整数打交道的小明 ...

  8. 2017 Multi-University Training 2 解题报告

    Is Derek lying? Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)T ...

  9. python3-开发进阶Django-form组件中model form组件

    Django的model form组件 这是一个神奇的组件,通过名字我们可以看出来,这个组件的功能就是把model和form组合起来,先来一个简单的例子来看一下这个东西怎么用:比如我们的数据库中有这样 ...

  10. python基础之文件操作,函数

    文件操作 +模式: r+t  w+t  a+t  r+b   w+b  a+b 可读可写,其他功能与人,r,w,a相同 f.seek(offset,whence) 文件指针移动    offest的单 ...