rxMethod para trabajo asíncrono
Gestionar flujos asíncronos con rxMethod
rxMethod para trabajo asíncrono es una lección gratuita de Angular Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Angular Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Angular Academy incluye 4 lecciones en total.
Asincronía en SignalStore
Muchas acciones son asíncronas: cargar datos, realizar búsquedas con debounce o consultar periódicamente. SignalStore ofrece rxMethod para gestionar estos flujos asíncronos reactivos y cancelables.
Conceptos básicos de rxMethod
rxMethod crea un método respaldado por un pipeline de RxJS. Puede llamarlo con un valor, una señal o un observable, y este se incorporará al flujo.
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 }))
))
}))Llamar a rxMethod
Invoque el método como cualquier método normal, con un valor simple. El valor entra en el pipeline que haya definido.
store.load('42');Pasar una señal
Puede pasar una signal a un rxMethod. El pipeline se vuelve a ejecutar automáticamente cada vez que cambia esa señal, lo que resulta ideal para cargas reactivas.
selectedId = signal('1');
ngOnInit() {
this.store.load(this.selectedId); // reloads when selectedId changes
}switchMap cancela el trabajo obsoleto
Usar switchMap significa que una emisión nueva cancela la solicitud anterior que aún está en curso. Así se evitan condiciones de carrera en las que una respuesta antigua y lenta sobrescribe una más reciente.
Seguimiento del estado de carga
Establezca un indicador de carga al principio y restablézcalo al completarse la operación, para que la interfaz pueda mostrar indicadores de progreso.
load: rxMethod<string>(pipe(
tap(() => patchState(store, { loading: true })),
switchMap(id => api.getById(id).pipe(
tap(item => patchState(store, { current: item, loading: false }))
))
))Gestión de errores
Los errores deben gestionarse dentro del pipeline; de lo contrario, el flujo finaliza y el método deja de funcionar. Use catchError dentro del observable interno.
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;
})
))Búsqueda con debounce
Combine operadores basados en tiempo para implementar la búsqueda a medida que se escribe. El pipeline aplica debounce y cambia de solicitud igual que en RxJS normal.
search: rxMethod<string>(pipe(
debounceTime(300),
distinctUntilChanged(),
switchMap(q => api.search(q)),
tap(results => patchState(store, { results }))
))Elegir el operador de aplanamiento
Use switchMap para cancelar trabajo obsoleto, concatMap para ponerlo en cola, mergeMap para ejecutarlo en paralelo y exhaustMap para ignorar nuevas llamadas mientras haya una en curso. Elija según la concurrencia que necesite.
Limpieza automática
La suscripción del pipeline está vinculada al ciclo de vida del store. Cuando se destruye el store (si tiene ámbito de componente), el flujo se desmantela, por lo que no hay fugas ni es necesario cancelar la suscripción manualmente.
Inicializar al crear
Combine rxMethod con la feature withHooks para activar una carga inicial cuando se cree el store.
withHooks({
onInit(store) { store.load('initial'); }
})Comprobación rápida
Compruebe sus conocimientos sobre rxMethod.
Resumen
Usó rxMethod para flujos asíncronos: lo llamó con valores o señales, eligió un operador de aplanamiento (switchMap para cancelar trabajo obsoleto), realizó el seguimiento de la carga, gestionó errores con catchError y aprovechó la limpieza automática de las suscripciones.
Preguntas frecuentes
¿La lección «rxMethod para trabajo asíncrono» es gratis?
Sí — el texto completo de «rxMethod para trabajo asíncrono» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Angular Academy, actualiza a CoddyKit PRO. El curso de Angular Academy incluye 4 lecciones en total.
¿Qué aprenderé en «rxMethod para trabajo asíncrono»?
Gestionar flujos asíncronos con rxMethod Practicas Angular Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Angular Academy?
No se requiere experiencia previa. Angular Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «rxMethod para trabajo asíncrono»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Angular Academy?
Sí. Cada lección de Angular Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Crear un SignalStore
- Computed y métodos
- rxMethod para trabajo asíncrono
- Entidades y funcionalidades personalizadas