NgRx&#s signalMethod を使用して Angular の副作用を強化する-jsチュートリアル-php.cn

NgRx&#s signalMethod を使用して Angular の副作用を強化する

Susan Sarandon

リリース： 2025-01-03 01:57:38

オリジナル

365 人が閲覧しました

Enhancing Side Effects in Angular with NgRx

NgRx は、常に Angular アプリケーションの状態を管理するための信頼できるライブラリです。 Signals API の導入により、開発者は状態の変化や副作用をより効率的に処理できるようになりました。これらの副作用に対処するために、NgRx チームは最近、リアクティブなワークフローを簡素化し、より直感的にする signalMethod を導入しました。

この記事では、signalMethod について詳しく説明し、実際の例を通してそれがどのように機能するのか、そしてそれが Angular ツールキットへの優れた追加である理由を説明します。

シグナルメソッドとは何ですか?

signalMethod は、NgRx によって導入されたユーティリティで、クリーンで反応的な方法で副作用を管理できるようにします。 RxJS オペレーターや手動のエフェクト管理に依存する可能性のある従来のアプローチとは異なり、signalMethod を使用すると、重要なこと、つまり変更を処理するロジックに集中できます。

信号とプロセッサー機能を組み合わせることでこれを実現します。この関数は、入力が静的な値であってもリアクティブな信号であっても、入力の変化に反応します。その結果、状態主導型のアクションを処理する柔軟かつ強力な方法が得られます。

信号駆動アクションのセットアップ

簡単な例から始めましょう: 数値が 2 倍になるたびにメッセージをログに記録します。 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 に渡され、2 倍になった値が記録されます。この例では、signalMethod が信号とどのように簡単に統合され、状態の変化に反応するかを示します。

信号に動的に反応する

温度監視システムに取り組んでいると仮定します。 2 倍の値を記録する代わりに、温度がしきい値を超えた場合にユーザーに警告する必要があります。 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 });
  }
}

ログイン後にコピー

signalMethod を選択する理由

エフェクトなどの他のツールと比較して、signalMethod にはいくつかの明確な利点があります。

柔軟性: 静的な値とリアクティブな信号の両方を処理できるため、混合シナリオに最適です。
明示的な依存関係の追跡: 提供されたシグナルのみを追跡し、意図しない依存関係のリスクを軽減します。
簡素化されたコンテキスト管理: Angular インジェクションコンテキストでシームレスに動作し、必要に応じて手動制御が可能です。

signalMethod を使用する場合に関する注意事項

signalMethod はリアクティブなワークフローでの単純な副作用を処理するのに最適ですが、RxJS の方が適しているシナリオもあります (特に複雑なストリームや競合状態が含まれるケースの場合)。ただし、NgRx 信号を活用するアプリケーションの場合、signalMethod はシンプルさとパワーの完璧なバランスを実現します。