NgRx Effects 简介

什么是副作用？

通常情况下，Angular 应用程序中的组件通过服务来执行副作用操作。在我们的课程项目中，ProductsComponent 通过 ProductsService 从服务器获取数据，代码如下：

src/app/products/products.component.ts

1import { Component, OnInit } from '@angular/core';
2import { ProductsService } from '../products.service';
3import { Store } from '@ngrx/store';
4import { getProductsAction } from './state/products.actions';
5import { getProductsSelector } from './state/products.selectors';
6import { AppState, Product } from '../app.interfaces';
7
8@Component({
9  selector: 'app-products',
10  templateUrl: './products.component.html',
11  styleUrls: ['./products.component.scss'],
12})
13export class ProductsComponent implements OnInit {
14  products$ = this.store.select<Product[]>(getProductsSelector);
15
16  constructor(private store: Store<AppState>, private productsService: ProductsService) {}
17
18  ngOnInit() {
19    this.getProducts();
20  }
21
22  getProducts() {
23    this.productsService
24      .getProducts()
25      .subscribe((products: Product[]) => this.store.dispatch(getProductsAction({ products })));
26  }
27}

在大型应用中，一个组件可能需要处理多个服务，随着时间推移，这种逻辑会变得难以维护。为了解决这个问题，@ngrx/effects 库帮助我们将基于服务的逻辑从组件中分离出来。

Effects 如何工作？

让我们回顾一下 NgRx 状态管理的生命周期，以理解 Effects 的工作原理。NgRx Effects 的运作流程如下：

• 当组件分发一个动作时，NgRx 将其传递给 reducers。
• Effects 持续监听特定类型的已分发动作。一旦触发了目标动作，Effects 就执行必要的操作，例如与服务进行交互。
• 当服务返回响应或错误时，Effects 会分发一个新的动作。
• 新分发的动作被传递给 reducer。
• Reducer 随后更新状态。
• Selectors 订阅状态变化。
• 最终，组件从 selectors 获取数据并显示更新后的数据。

以下是上述步骤的可视化展示：

使用 NgRx Effects 的优势

• Effects 将副作用与 Angular 组件分离，使组件只需专注于状态更新。
• 我们可以通过 Effects 在独立的文件中管理副作用，从而让测试副作用变得更加容易。

设置 @ngrx/effects

要将 @ngrx/effects 库添加到项目中，请参考《配置 NgRx Effects》一课。