rxMethod voor asynchroon werk
Verwerk asynchrone flows met rxMethod
rxMethod voor asynchroon werk is een gratis Angular Academy-les op CoddyKit. Dit is les 3 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Angular Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Angular Academy bevat in totaal 4 lessen.
Asynchroon in SignalStore
Veel acties zijn asynchroon: gegevens laden, zoeken met vertraging en peilen. SignalStore biedt rxMethod om deze reactieve, annuleerbare asynchrone stromen te beheren.
De basis van rxMethod
rxMethod maakt een methode die door een RxJS-pipeline wordt ondersteund. Je roept deze aan met een waarde, signaal of Observable, waarna die waarde de stream in gaat.
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 aanroepen
Roep deze aan als een normale methode met een gewone waarde. De waarde komt terecht in de pipeline die je hebt gedefinieerd.
store.load('42');Een signaal doorgeven
Je kunt een signal doorgeven aan een rxMethod. De pipeline wordt automatisch opnieuw uitgevoerd telkens wanneer dat signaal verandert, wat ideaal is voor reactief laden.
selectedId = signal('1');
ngOnInit() {
this.store.load(this.selectedId); // reloads when selectedId changes
}switchMap annuleert verouderd werk
Met switchMap annuleert een nieuwe waarde het vorige verzoek dat nog wordt uitgevoerd. Zo voorkom je racecondities waarbij een oud, traag antwoord een nieuwer antwoord overschrijft.
Laadstatus bijhouden
Werk aan het begin een laadindicator bij en wis die na voltooiing, zodat de interface laadanimaties kan tonen.
load: rxMethod<string>(pipe(
tap(() => patchState(store, { loading: true })),
switchMap(id => api.getById(id).pipe(
tap(item => patchState(store, { current: item, loading: false }))
))
))Foutafhandeling
Fouten moeten binnen de pipeline worden afgehandeld; anders wordt de stream voltooid en werkt de methode niet meer. Gebruik catchError binnen de innerlijke Observable.
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;
})
))Zoeken met vertraging
Combineer tijdgebaseerde operatoren voor zoeken tijdens het typen. De pipeline past vertraging toe en schakelt over, net als gewone RxJS.
search: rxMethod<string>(pipe(
debounceTime(300),
distinctUntilChanged(),
switchMap(q => api.search(q)),
tap(results => patchState(store, { results }))
))De afvlakkingsoperator kiezen
Gebruik switchMap om verouderd werk te annuleren, concatMap om het in een wachtrij te zetten, mergeMap voor parallelle uitvoering en exhaustMap om nieuwe aanroepen tijdens een actieve bewerking te negeren. Kies op basis van de gewenste gelijktijdigheid.
Automatisch opruimen
Het abonnement van de pipeline is gekoppeld aan de levenscyclus van de statusopslag. Wanneer de statusopslag wordt vernietigd, bij een componentgebonden statusopslag, wordt de stream afgebroken. Zo ontstaan er geen lekken en is handmatig opzeggen niet nodig.
Initialiseren bij het aanmaken
Combineer rxMethod met de functionaliteit withHooks om een eerste laadactie te starten wanneer de statusopslag wordt aangemaakt.
withHooks({
onInit(store) { store.load('initial'); }
})Korte controle
Controleer je kennis van rxMethod.
Samenvatting
Je hebt rxMethod gebruikt voor asynchrone stromen: aanroepen met waarden of signalen, een afvlakkingsoperator kiezen (switchMap om verouderd werk te annuleren), de laadstatus bijhouden, fouten afhandelen met catchError en vertrouwen op het automatisch opruimen van abonnementen.
Leer HTML met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 38
- Lessen
- 144
Veelgestelde vragen
Is de les “rxMethod voor asynchroon werk” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad Angular Academy, waaronder “rxMethod voor asynchroon werk”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Angular Academy bevat in totaal 4 lessen.
Wat leer ik in “rxMethod voor asynchroon werk”?
Verwerk asynchrone flows met rxMethod Je oefent met Angular Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Angular Academy te beginnen?
Ervaring vooraf is niet nodig. Angular Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 3 van 4.
Hoe lang duurt de les “rxMethod voor asynchroon werk”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Angular Academy?
Ja. Elke les over Angular Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Een SignalStore maken
- Computed en methods
- rxMethod voor asynchroon werk
- Entiteiten en aangepaste features