NgRx 一直是管理 Angular 應(yīng)用程序狀態(tài)的值得信賴的庫。隨著 Signals API 的推出，開發(fā)人員現(xiàn)在可以采用更簡化的方式來處理狀態(tài)更改和副作用。為了處理這些副作用，NgRx 團(tuán)隊(duì)最近引入了 signalMethod，它簡化了反應(yīng)式工作流程并使其更加直觀。

在本文中，我將深入研究 signalMethod，通過實(shí)際示例展示它的工作原理以及為什么它是 Angular 工具包的絕佳補(bǔ)充。

---

什么是信號方法？

signalMethod 是 NgRx 引入的一個實(shí)用程序，它允許您以干凈、反應(yīng)的方式管理副作用。與可能依賴 RxJS 運(yùn)算符或手動效果管理的傳統(tǒng)方法不同，signalMethod 可讓您專注于重要的事情：處理更改的邏輯。

它通過將信號與處理器功能相結(jié)合來實(shí)現(xiàn)這一點(diǎn)。該函數(shù)對其輸入的變化做出反應(yīng)，無論是靜態(tài)值還是反應(yīng)信號。結(jié)果是一種靈活而強(qiáng)大的方式來處理狀態(tài)驅(qū)動的操作。

---

設(shè)置信號驅(qū)動的操作

讓我們從一個簡單的例子開始：每當(dāng)數(shù)字翻倍時記錄一條消息。以下是使用 signalMethod 實(shí)現(xiàn)此目的的方法：

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);
  }
}

這里，每當(dāng)調(diào)用increment方法時都會調(diào)用logDoubledValue。計(jì)數(shù)器的值被傳遞到 signalMethod，然后記錄加倍的值。此示例展示了 signalMethod 與信號集成以對狀態(tài)變化做出反應(yīng)是多么容易。

---

動態(tài)地響應(yīng)信號

假設(shè)您正在開發(fā)溫度監(jiān)控系統(tǒng)。如果溫度超過閾值，您需要提醒用戶，而不是記錄雙倍的值。使用 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 方法都會評估新值并在溫度過高時發(fā)出警告。

---

控制服務(wù)的清理

在某些情況下，您可以在服務(wù)中而不是直接在組件中定義 signalMethod。這可以更好地重用，但需要仔細(xì)管理副作用以避免內(nèi)存泄漏。

這是一個例子：

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}`);
  });
}

現(xiàn)在，假設(shè)一個組件使用此服務(wù)：

@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
  }
}

為了防止內(nèi)存泄漏，請確保在動態(tài)場景中使用服務(wù)時注入組件的上下文：

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 });
  }
}

---

為什么選擇signalMethod？

與effect等其他工具相比，signalMethod具有一些明顯的優(yōu)勢：

1. 靈活性：它可以處理靜態(tài)值和反應(yīng)信號，非常適合混合場景。
2. 顯式依賴跟蹤：僅跟蹤提供的信號，降低意外依賴的風(fēng)險。
3. 簡化的上下文管理：在 Angular 注入上下文中無縫工作，并在需要時允許手動控制。

---

關(guān)于何時使用 signalMethod 的注意事項(xiàng)

雖然 signalMethod 非常適合處理反應(yīng)式工作流程中的直接副作用，但在某些情況下 RxJS 可能更適合 - 特別是對于復(fù)雜的流或涉及競爭條件的情況。然而，對于利用 NgRx 信號的應(yīng)用程序，signalMethod 實(shí)現(xiàn)了簡單性和功能的完美平衡。

---

最后的想法

NgRx 的 signalMethod 是處理 Angular 應(yīng)用程序中副作用的游戲規(guī)則改變者。通過將信號的優(yōu)雅與處理器功能的靈活性相結(jié)合，它簡化了反應(yīng)模式，同時保持對清理和依賴關(guān)系的控制。

如果您在項(xiàng)目中使用 NgRx Signals，我強(qiáng)烈建議您探索 signalMethod 來簡化副作用處理。嘗試一下并體驗(yàn)它如何使您的 Angular 應(yīng)用程序更干凈、更具反應(yīng)性！

以上是使用 NgRx 的 signalMethod 增強(qiáng) Angular 的副作用的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！