NgRx 一直是 Angular 应用状态管理的可靠库。随着 Signals API 的问世，开发者可以使用更简洁的方式处理状态变更和副作用。为处理这些副作用，NgRx 团队近期推出了 signalMethod，它简化了响应式工作流程，使其更直观易用。
本文将深入探讨 signalMethod，通过实际示例展示其工作原理，以及为何它是 Angular 工具包的绝佳补充。
signalMethod 的作用
signalMethod 是 NgRx 引入的一个实用程序，允许以简洁、响应式的方式管理副作用。不同于依赖 RxJS 运算符或手动管理副作用的传统方法，signalMethod 让您专注于核心逻辑：处理变更。
它通过将信号与处理器函数结合来实现这一点。该函数对输入的变更做出反应，无论输入是静态值还是响应式信号。最终实现了一种灵活且强大的方式来处理状态驱动的操作。
配置信号驱动的操作
让我们从一个简单的例子开始：每当数值翻倍时记录一条消息。以下是使用 signalMethod 实现的方法：
<code class="typescript">import { Component } from '@angular/core';
import { signal, signalMethod } from '@ngrx/signals';
@Component({
selector: 'app-math-logger',
template: `Increment`
})
export class MathLoggerComponent {
private counter = signal(1);
// 定义 signalMethod
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);
}
}</code>
此处，每当调用 increment 方法时，logDoubledValue 都会被调用。计数器的值传递给 signalMethod，然后记录其双倍值。此示例展示了 signalMethod 与信号集成以响应状态变化是多么容易。
动态响应信号
假设您正在开发一个温度监控系统。如果温度超过阈值，您需要提醒用户，而不是记录双倍值。使用 signalMethod，这很容易实现：
<code class="typescript">@Component({
selector: 'app-temperature-monitor',
template: `Increase Temperature`
})
export class TemperatureMonitorComponent {
private temperature = signal(20); // 从 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);
}
}</code>
每次温度升高时，alertHighTemperature 方法都会评估新值，并在温度过高时发出警告。
控制服务的清理
在某些情况下，您可以在服务中定义 signalMethod，而不是直接在组件中定义。这可以提高代码复用性，但需要仔细管理副作用以避免内存泄漏。
这是一个例子：
<code class="typescript">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}`);
});
}</code>
现在，假设一个组件使用此服务：
<code class="typescript">@Component({
selector: 'app-score-tracker',
template: `Update Score`
})
export class ScoreTrackerComponent {
private scoreService = inject(ScoreService);
private score = signal(0);
updateScore() {
this.score.set(this.score() + 10);
this.scoreService.logScore(this.score); // 信号驱动的操作
}
}</code>
为了防止内存泄漏，请确保在动态场景中使用服务时注入组件的上下文：
<code class="typescript">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 });
}
}</code>
为何选择 signalMethod？
与 effect 等其他工具相比，signalMethod 有一些明显的优势：
- 灵活性: 它可以处理静态值和响应式信号，非常适合混合场景。
- 显式依赖跟踪: 只跟踪提供的信号，降低意外依赖的风险。
- 简化的上下文管理: 在 Angular 注入上下文中无缝工作，并在需要时允许手动控制。
关于何时使用 signalMethod 的注意事项
虽然 signalMethod 非常适合处理响应式工作流程中的直接副作用，但在某些情况下 RxJS 可能更适合——尤其是在处理复杂的流或涉及竞争条件的情况下。然而，对于使用 NgRx Signals 的应用程序，signalMethod 在简洁性和功能性之间取得了完美的平衡。
总结
NgRx 的 signalMethod 是处理 Angular 应用中副作用的革新工具。通过将信号的优雅与处理器函数的灵活性相结合，它简化了响应式模式，同时保持对清理和依赖关系的控制。
如果您在项目中使用 NgRx Signals，强烈建议您探索 signalMethod 以简化副作用处理。尝试一下，体验它如何使您的 Angular 应用更简洁、更具响应性！
