参考 ngrx 官网：https://ngrx.io/guide/effects#registering-root-effects

Comparison with component-based side effects

在基于服务的应用程序中，您的组件通过许多不同的服务与数据交互，这些服务通过属性和方法公开数据。这些服务可能依赖于管理其他数据集的其他服务。您的组件使用这些服务来执行任务，从而赋予您的组件许多职责——违反了设计的单一职责原理。

想象一下，您的应用程序管理电影。这是一个获取并显示电影列表的组件。

@Component({template: `<li *ngFor="let movie of movies">{{ movie.name }}</li>`
})
export class MoviesPageComponent {movies: Movie[];constructor(private movieService: MoviesService) {}ngOnInit() {this.movieService.getAll().subscribe(movies => this.movies = movies);}
}

service 实现，负责读取 movies：

@Injectable({providedIn: 'root'
})
export class MoviesService {constructor (private http: HttpClient) {}getAll() {return this.http.get('/movies');}
}

这一个小小的 Component，就做了如下许多事情：

管理电影的状态。
使用该服务执行副作用，访问外部 API 以获取电影。
更改组件内电影的状态。

引入 Store 和 Effect 的好处

与 Store 一起使用时，Effects 会减少 Component 的责任。在更大的应用程序中，这变得更加重要，因为您有多个数据源，需要多个服务来获取这些数据，而服务可能依赖于其他服务。

Effects 处理外部数据和交互，允许您的服务实现达到 less stateful 的效果，并且只执行与外部交互相关的任务。接下来，重构组件以将共享的电影数据放入 Store。 Effects 处理电影数据的获取。

重构后的 Component 实现：

@Component({template: `<div *ngFor="let movie of movies$ | async">{{ movie.name }}</div>`
})
export class MoviesPageComponent {movies$: Observable<Movie[]> = this.store.select(state => state.movies);constructor(private store: Store<{ movies: Movie[] }>) {}ngOnInit() {this.store.dispatch({ type: '[Movies Page] Load Movies' });}
}

电影仍然通过 MoviesService 获取，但现在组件不再关心如何获取和加载电影。它只负责声明其加载电影的意图，并使用 selector 访问电影列表数据。

Effects 是获取电影的异步活动发生的地方。您的组件变得更容易测试并且对它需要的数据负责。

为什么在大型 Angular 应用里我们需要使用 ngrx相关推荐

Angular 项目里 angular.json 文件内容的学习笔记
看一个基于 Angular 的 SAP Spartacus 项目里 angular.json 的例子: version: The configuration-file version. newProj ...
Angular应用里setTimeout被如何被monkey patched的
monkey patched: monkey patch指的是在运行时动态替换,一般是在startup的时候. 下面的测试代码可以让我们弄清楚,浏览器支持的原生函数setTimeout,是如何在Ang ...
Angular应用里的tsconfig.app.json
tsconfig.app.json是tsconfig.json的扩展: 在应用工程文件angular.json里的tsConfig字段处被引用: ng build后的输出: 2020年10月4日国庆节 ...
Angular应用里的Template Reference变量
Angular应用里的Template Reference Variable,模板引用变量,用于创建一个对模板里DOM元素或者Angular指令的引用. 使用#号定义一个模板引用变量. 看个具体的例子 ...
Angular应用里HTTP请求的错误处理
在需要进行错误处理的Angular应用里,从rxjs里导入catchError: import { catchError, map, tap } from 'rxjs/operators'; getH ...
【译】开发大型 Angular 应用的12条架构清单
原文链接:12 Things to Help Large Organizations Do Angular Right 在 Nrwl,我们帮助财富500强公司用正确的方式使用 Angular 平台开发 ...
@angular/core里的 NgZone -使得Angular不跟踪变化
前言: 在模板中实时获取一个变量,模板中就频繁的更新显示,频繁的变动将造成性能损耗. 或者在双向绑定时,异步事件的发生会导致组件中的数据变化,但是你想要适当时机再改变模板显示. 一.NgZone An ...
Angular 应用里的 vendor.js 是用来干什么的？
What is vendor file in angular? 以 SAP 电商云 UI 的 Angular 页面为例,这个 vendor.js 有超过 17 万行代码: 此文件包含导入您的应用程序 ...
关于 Angular 项目里的 index.ts
如下图所示:如果我需要在文件夹 A 里的某文件,访问文件夹 B 里的某服务,而文件夹 A 和 B 分别是两个不同 module 的实现,我需要在文件夹 A 的文件里,通过导入文件夹 B 里定义的 in ...

为什么在大型 Angular 应用里我们需要使用 ngrx

Comparison with component-based side effects

引入 Store 和 Effect 的好处

为什么在大型 Angular 应用里我们需要使用 ngrx相关推荐

最新文章

热门文章