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. 走进 UnitTest for Xamarin.Forms

    之前讲了 Xamarin.Forms 的 UITest 走进 UITest for Xamarin.Forms 走进 Xamarin Test Recorder for Xamarin.Forms 但 ...

  2. web前端—css面试题

    1.CSS 选择符有哪些? 2.CSS 优先级的选择过程? 优先级复合就近原则,同权重的情况下有限选择最近的属性. 载入样式的话是以最后载入的定位为准. 优先级: !important > id ...

  3. Java容器类解析

    1:集合 Collection(单列集合) List(有序,可重复) ArrayList 底层数据结构是数组,默认长度是十 查询快,增删慢 add()时判断是否数组越界,数组扩容为原来的1.5倍 线程 ...

  4. 安装 Apache 源代码包

    把自己在网易博客的文章迁移过来 cd /lamp/httpd-2.2.9 ./configure --prefix=/usr/local/apache2/ --sysconfdir=/usr/loca ...

  5. 洛谷P1850换教室

    题目传送门 理解题意:给定你一个学期的课程和教室数量以及教室之间的距离还有换教室成功的概率,求一个学期走的距离的期望最小值 题目是有够恶心的,属于那种一看就让人不想刷的题目...很明显的动规,但是那个 ...

  6. webpack HMR原理

    在启动 devServer 的时候,sockjs 在服务端和浏览器端建立了一个 webSocket 长连接,以便将 webpack 编译和打包的各个阶段状态告知浏览器,最关键的步骤还是 webpack ...

  7. CNN的发展

    模型的建立过程: 1959年,Hubel & Wiesel发现动物视觉皮层中的细胞负责检测感受野(receptive fields)中的光线.论文:Receptive fields and f ...

  8. pdf转tiff

    概述 基于Java,将pdf转成单一的tiff文件. MAVEN依赖 <groupId>com.sun.media</groupId> <artifactId>ja ...

  9. luogu P1047 校门外的树

    题目描述 某校大门外长度为L的马路上有一排树,每两棵相邻的树之间的间隔都是1米.我们可以把马路看成一个数轴,马路的一端在数轴0的位置,另一端在L的位置:数轴上的每个整数点,即0,1,2,……,L,都种 ...

  10. POJ1704 Georgia and Bob 博弈论 尼姆博弈 阶梯博弈

    http://poj.org/problem?id=1704 我并不知道阶梯博弈是什么玩意儿,但是这道题的所有题解博客都写了这个标签,所以我也写了,百度了一下,大概是一种和这道题类似的能转换为尼姆博弈 ...