RxJS: Operadores Avanzados para Angular Developers

Dominando RxJS en Angular

RxJS es el corazón de la programación reactiva en Angular. Más allá de los operadores básicos como map y filter, existen operadores avanzados que pueden transformar completamente tu código.

Operadores de Transformación Avanzados

switchMap vs mergeMap vs concatMap vs exhaustMap

Estos operadores son fundamentales pero a menudo confusos:

// switchMap: Cancela peticiones anteriores
this.searchControl.valueChanges.pipe(
  debounceTime(300),
  switchMap(term => this.api.search(term))
).subscribe();

// mergeMap: Ejecuta todas en paralelo
this.items$.pipe(
  mergeMap(item => this.api.getDetails(item.id))
).subscribe();

// concatMap: Ejecuta en orden secuencial
this.queue$.pipe(
  concatMap(task => this.processTask(task))
).subscribe();

// exhaustMap: Ignora nuevas peticiones hasta completar la actual
this.saveButton$.pipe(
  exhaustMap(() => this.api.save(this.form.value))
).subscribe();

Operadores de Combinación

combineLatest, forkJoin, zip

// combineLatest: Emite cuando cualquiera cambia
combineLatest([
  this.user$,
  this.permissions$,
  this.settings$
]).pipe(
  map(([user, permissions, settings]) => ({
    user, permissions, settings
  }))
).subscribe();

// forkJoin: Espera a que todos completen
forkJoin({
  users: this.api.getUsers(),
  products: this.api.getProducts(),
  orders: this.api.getOrders()
}).subscribe();

// zip: Combina valores en el mismo índice
zip(
  interval(1000),
  of('a', 'b', 'c')
).subscribe(([num, letter]) => console.log(num, letter));

Manejo de Errores Avanzado

this.api.getData().pipe(
  retry(3),
  retryWhen(errors => errors.pipe(
    delayWhen((error, index) => timer(Math.pow(2, index) * 1000)),
    take(3)
  )),
  catchError(error => {
    this.logger.error(error);
    return of([]);
  })
).subscribe();

Mejores Prácticas

1. Siempre desuscribirse: Usa takeUntil con un Subject destroy$
2. Evita nested subscriptions: Usa operadores de transformación
3. Maneja errores: Siempre incluye catchError
4. Usa shareReplay: Para evitar múltiples HTTP requests
5. Tipado fuerte: Define tipos para tus Observables

Conclusión

Dominar RxJS es esencial para ser un desarrollador Angular efectivo. Estos operadores avanzados te permiten escribir código más limpio, eficiente y mantenible.