使用 NgRx 的信号方法增强 Angular 中的副作用

# Web 开发 # JavaScript # 编程 # Angular

NgRx 一直是 Angular 应用程序中管理状态的可靠库。随着 Signals API 的推出，开发人员现在可以通过更简化的方式来处理状态变化和副作用。为了处理这些副作用，NgRx 团队最近推出了“signalMethod”，它简化了响应式工作流程并使其更加直观。

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

什么是 signal方法？

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

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

设置信号驱动的动作

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

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

@Component({
  selector: 'app-math-logger',
  template: ``
})
export class MathLoggerComponent {
  private counter = signal(1);

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

  constructor() {
    this.logDoubledValue(this.counter);
  }

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

这里，每当调用“increment”方法时，就会调用“logDoubledValue”。计数器的值被传递到“signalMethod”，然后记录加倍的值。此示例展示了“signalMethod”如何轻松地与信号集成以对状态变化做出反应。

动态响应信号

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

@Component({
  selector: 'app-temperature-monitor',
  template: ``
})
export class TemperatureMonitorComponent {
  private temperature = signal(20); // Start at 20°C

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

  constructor() {
    this.alertHighTemperature(this.temperature);
  }

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

每次温度升高时，“alertHighTemperature”方法都会评估新值，如果温度过高则发出警告。

控制服务清理

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

以下是一个例子：

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

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

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

@Component({
  selector: 'app-score-tracker',
  template: ``
})
export class ScoreTrackerComponent {
  private scoreService = inject(ScoreService);

  private score = signal(0);

  constructor() {
    this.scoreService.logScore(this.score);
  }

  updateScore() {
    this.score.set(this.score() + 10);
  }
}

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

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

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

  private score = signal(0);

  constructor() {
    this.scoreService.logScore(this.score, { injector: this.injector });
  }

  updateScore() {
    this.score.set(this.score() + 10);
  }
}

为什么选择 signal方法？

与“effect”等其他工具相比，“signalMethod”具有一些明显的优势：

灵活性：它既可以处理静态值，也可以处理无功信号，非常适合混合场景。

显式依赖跟踪：仅跟踪提供的信号，降低意外依赖的风险。

简化的上下文管理：在 Angular 注入上下文中无缝工作，并在需要时允许手动控制。

关于何时使用 signal方法的说明

虽然 `signalMethod` 非常适合处理响应式工作流中的直接副作用，但在某些情况下，RxJS 可能更适合 - 尤其是对于复杂的流或涉及竞争条件的情况。然而，对于利用 NgRx 信号的应用程序，`signalMethod` 在简单性和功能性之间取得了完美的平衡。

最后的想法

NgRx 的“signalMethod”改变了 Angular 应用程序中处理副作用的方式。通过将信号的优雅性与处理器函数的灵活性相结合，它简化了反应模式，同时保持了对清理和依赖项的控制。

如果您在项目中使用 NgRx Signals，我强烈建议您探索“signalMethod”以简化您的副作用处理。尝试一下，体验它如何让您的 Angular 应用程序更简洁、更具响应性！

CLIS.CC