使用 NgRx 的 signalMethod 增强 Angular 的副作用-js教程-PHP中文网

Enhancing Side Effects in Angular with NgRx

NgRx 一直是管理 Angular 应用程序状态的值得信赖的库。随着 Signals API 的推出，开发人员现在可以采用更简化的方式来处理状态更改和副作用。为了处理这些副作用，NgRx 团队最近引入了 signalMethod，它简化了反应式工作流程并使其更加直观。

在本文中，我将深入研究 signalMethod，通过实际示例展示它的工作原理以及为什么它是 Angular 工具包的绝佳补充。

什么是信号方法？

signalMethod 是 NgRx 引入的一个实用程序，它允许您以干净、反应的方式管理副作用。与可能依赖 RxJS 运算符或手动效果管理的传统方法不同，signalMethod 可让您专注于重要的事情：处理更改的逻辑。

它通过将信号与处理器功能相结合来实现这一点。该函数对其输入的变化做出反应，无论是静态值还是反应信号。结果是一种灵活而强大的方式来处理状态驱动的操作。

设置信号驱动的操作

让我们从一个简单的例子开始：每当数字翻倍时记录一条消息。以下是使用 signalMethod 实现此目的的方法：

import { Component } from '@angular/core';
import { signalMethod } from '@ngrx/signals';

@Component({
  selector: 'app-math-logger',
  template: `<button (click)="increment()">Increment</button>`
})
export class MathLoggerComponent {
  private counter = signal(1);

  // Define the signal method
  readonly logDoubledValue = signalMethod<number>((value) => {
    const doubled = value * 2;
    console.log(`Doubled Value: ${doubled}`);
  });

  increment() {
    this.counter.set(this.counter() + 1);
    this.logDoubledValue(this.counter);
  }
}

登录后复制

这里，每当调用increment方法时都会调用logDoubledValue。计数器的值被传递到 signalMethod，然后记录加倍的值。此示例展示了 signalMethod 与信号集成以对状态变化做出反应是多么容易。

动态地响应信号

假设您正在开发温度监控系统。如果温度超过阈值，您需要提醒用户，而不是记录双倍的值。使用 signalMethod，这变得简单：

@Component({
  selector: 'app-temperature-monitor',
  template: `<button (click)="increaseTemperature()">Increase Temperature</button>`
})
export class TemperatureMonitorComponent {
  private temperature = signal(20); // Start at 20°C

  readonly alertHighTemperature = signalMethod<number>((temp) => {
    if (temp > 30) {
      console.warn('Warning: High temperature detected!');
    }
  });

  increaseTemperature() {
    this.temperature.set(this.temperature() + 5);
    this.alertHighTemperature(this.temperature);
  }
}

登录后复制

每次温度升高时，alertHighTemperature 方法都会评估新值并在温度过高时发出警告。

控制服务的清理

在某些情况下，您可以在服务中而不是直接在组件中定义 signalMethod。这可以更好地重用，但需要仔细管理副作用以避免内存泄漏。

这是一个例子：

import { Injectable } from '@angular/core';
import { signalMethod } from '@ngrx/signals';

@Injectable({ providedIn: 'root' })
export class ScoreService {
  readonly logScore = signalMethod<number>((score) => {
    console.log(`Current Score: ${score}`);
  });
}

登录后复制

现在，假设一个组件使用此服务：

@Component({
  selector: 'app-score-tracker',
  template: `<button (click)="updateScore()">Update Score</button>`
})
export class ScoreTrackerComponent {
  private scoreService = inject(ScoreService);

  private score = signal(0);

  updateScore() {
    this.score.set(this.score() + 10);
    this.scoreService.logScore(this.score); // Signal-driven action
  }
}

登录后复制

为了防止内存泄漏，请确保在动态场景中使用服务时注入组件的上下文：

import { Injector } from '@angular/core';

@Component({ /* ... */ })
export class ScoreTrackerComponent {
  private injector = inject(Injector);
  private scoreService = inject(ScoreService);

  private score = signal(0);

  updateScore() {
    this.score.set(this.score() + 10);
    this.scoreService.logScore(this.score, { injector: this.injector });
  }
}

登录后复制