非同期処理のためのrxMethod
rxMethodで非同期フローを処理します
「非同期処理のためのrxMethod」はCoddyKit上の無料Angular Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。
SignalStore での非同期処理
データの読み込み、デバウンス検索、ポーリングなど、多くのアクションは非同期です。SignalStore には、リアクティブでキャンセル可能な非同期フローを管理する rxMethod があります。
rxMethod の基本
rxMethod は RxJS パイプラインを基盤とするメソッドを作成します。値（またはシグナル/Observable）を渡して呼び出すと、その値がストリームに送られます。
import { rxMethod } from '@ngrx/signals/rxjs-interop';
import { pipe, switchMap, tap } from 'rxjs';
withMethods((store, api = inject(Api)) => ({
load: rxMethod<string>(pipe(
switchMap(id => api.getById(id)),
tap(item => patchState(store, { current: item }))
))
}))rxMethod の呼び出し
通常のメソッドと同じように、単純な値を渡して呼び出します。その値が定義したパイプラインに入ります。
store.load('42');シグナルを渡す
signal を rxMethod に渡せます。シグナルが変化するたびにパイプラインが自動的に再実行されるため、リアクティブなデータ読み込みに最適です。
selectedId = signal('1');
ngOnInit() {
this.store.load(this.selectedId); // reloads when selectedId changes
}switchMap で古い処理をキャンセルする
switchMap を使うと、新しい値の発行時に、実行中の前のリクエストがキャンセルされます。これにより、古くて遅いレスポンスが新しいレスポンスを上書きする競合状態を防げます。
読み込み状態の追跡
開始時に読み込みフラグを設定し、完了時に解除します。これにより UI でスピナーを表示できます。
load: rxMethod<string>(pipe(
tap(() => patchState(store, { loading: true })),
switchMap(id => api.getById(id).pipe(
tap(item => patchState(store, { current: item, loading: false }))
))
))エラー処理
エラーはパイプライン内で処理する必要があります。処理しないとストリームが完了し、メソッドが動作しなくなります。内側の Observable 内で catchError を使用します。
switchMap(id => api.getById(id).pipe(
tap(item => patchState(store, { current: item, error: null })),
catchError(err => {
patchState(store, { error: err.message, loading: false });
return EMPTY;
})
))デバウンス検索
時間ベースのオペレーターを組み合わせて、入力中に検索する機能を作成します。パイプラインは通常の RxJS と同じようにデバウンスして切り替えます。
search: rxMethod<string>(pipe(
debounceTime(300),
distinctUntilChanged(),
switchMap(q => api.search(q)),
tap(results => patchState(store, { results }))
))平坦化オペレーターの選択
古い処理をキャンセルするには switchMap、キューに入れるには concatMap、並列実行には mergeMap、処理中の新しい呼び出しを無視するには exhaustMap を使います。必要な並行性に応じて選択します。
自動クリーンアップ
パイプラインの購読はストアのライフサイクルに紐づきます。ストア（コンポーネントスコープの場合）が破棄されるとストリームも停止するため、リークが発生せず、手動で unsubscribe する必要もありません。
作成時の初期化
rxMethod と withHooks feature を組み合わせて、ストア作成時に初回読み込みを実行します。
withHooks({
onInit(store) { store.load('initial'); }
})理解度チェック
rxMethod の知識を確認しましょう。
まとめ
非同期フローに rxMethod を使用しました。値またはシグナルを渡して呼び出し、平坦化オペレーター（古い処理をキャンセルする switchMap など）を選び、読み込み状態を追跡し、catchError でエラーを処理し、購読の自動クリーンアップを利用します。
よくある質問
「非同期処理のためのrxMethod」レッスンは無料ですか？
はい。「非同期処理のためのrxMethod」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。
「非同期処理のためのrxMethod」で何を学びますか？
rxMethodで非同期フローを処理します ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Angular Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「非同期処理のためのrxMethod」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このAngular Academyレッスンでコードを書いて実行できますか？
はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- SignalStoreの作成
- Computedとメソッド
- 非同期処理のためのrxMethod
- エンティティとカスタム機能