rxMethod pour les opérations asynchrones
Gérez les flux asynchrones avec rxMethod
rxMethod pour les opérations asynchrones est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Angular Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Angular Academy comprend 4 leçons au total.
Asynchrone dans SignalStore
De nombreuses actions sont asynchrones : chargement de données, recherche avec temporisation ou interrogation périodique. SignalStore propose rxMethod pour gérer ces flux asynchrones réactifs et annulables.
Les bases de rxMethod
rxMethod crée une méthode fondée sur un pipeline RxJS. Vous l’appelez avec une valeur (ou un signal/Observable), qui est injectée dans le flux.
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 }))
))
}))Appeler rxMethod
Appelez-la comme une méthode normale avec une valeur simple. La valeur entre dans le pipeline que vous avez défini.
store.load('42');Transmettre un signal
Vous pouvez transmettre un signal à une rxMethod. Elle relance automatiquement le pipeline chaque fois que ce signal change, ce qui est idéal pour les chargements réactifs.
selectedId = signal('1');
ngOnInit() {
this.store.load(this.selectedId); // reloads when selectedId changes
}switchMap annule le travail obsolète
Utiliser switchMap signifie qu’une nouvelle émission annule la requête précédente encore en cours. Cela évite les conditions de concurrence dans lesquelles une ancienne réponse lente écraserait une réponse plus récente.
Suivre l’état de chargement
Activez un indicateur de chargement au début, puis désactivez-le à la fin, afin que l’interface puisse afficher des indicateurs de progression.
load: rxMethod<string>(pipe(
tap(() => patchState(store, { loading: true })),
switchMap(id => api.getById(id).pipe(
tap(item => patchState(store, { current: item, loading: false }))
))
))Gestion des erreurs
Les erreurs doivent être gérées dans le pipeline ; sinon, le flux se termine et la méthode cesse de fonctionner. Utilisez catchError dans l’Observable interne.
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;
})
))Recherche avec temporisation
Combinez des opérateurs temporels pour la recherche au fil de la saisie. Le pipeline applique une temporisation et bascule de la même manière qu’avec RxJS seul.
search: rxMethod<string>(pipe(
debounceTime(300),
distinctUntilChanged(),
switchMap(q => api.search(q)),
tap(results => patchState(store, { results }))
))Choisir l’opérateur d’aplatissement
Utilisez switchMap pour annuler le travail obsolète, concatMap pour mettre en file d’attente, mergeMap pour exécuter en parallèle et exhaustMap pour ignorer les nouveaux appels pendant une opération. Faites votre choix selon la concurrence souhaitée.
Nettoyage automatique
L’abonnement du pipeline est lié au cycle de vie du store. Lorsque le store est détruit (s’il est limité au composant), le flux est interrompu : il n’y a donc ni fuite ni désabonnement manuel.
Initialiser à la création
Combinez rxMethod avec la fonctionnalité withHooks pour déclencher un chargement initial lors de la création du store.
withHooks({
onInit(store) { store.load('initial'); }
})Vérification rapide
Vérifiez vos connaissances de rxMethod.
Récapitulatif
Vous avez utilisé rxMethod pour les flux asynchrones : l’appeler avec des valeurs ou des signaux, choisir un opérateur d’aplatissement (switchMap pour annuler le travail obsolète), suivre le chargement, gérer les erreurs avec catchError et compter sur le nettoyage automatique des abonnements.
Questions Fréquemment Posées
La leçon « rxMethod pour les opérations asynchrones » est-elle gratuite ?
Oui — le texte complet de « rxMethod pour les opérations asynchrones » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Angular Academy, passe à CoddyKit PRO. Le cours Angular Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « rxMethod pour les opérations asynchrones » ?
Gérez les flux asynchrones avec rxMethod Tu pratiques Angular Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Angular Academy ?
Aucune expérience préalable n'est requise. Angular Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.
Combien de temps prend la leçon « rxMethod pour les opérations asynchrones » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Angular Academy ?
Oui. Chaque leçon Angular Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Créer un SignalStore
- État calculé et méthodes
- rxMethod pour les opérations asynchrones
- Entités et fonctionnalités personnalisées