Unione e Filtraggio dei Flussi di Dati in RxJS con mergeMap e filter in Angular

Angular, con la sua potente integrazione di RxJS, ci offre strumenti straordinari per gestire i flussi di dati asincroni. Spesso, ci troviamo ad affrontare scenari complessi dove dobbiamo combinare e trasformare più flussi, filtrando i dati in base a criteri specifici. In questo articolo esploreremo due operatori RxJS fondamentali, mergeMap e filter, mostrando come usarli efficacemente in un'applicazione Angular per gestire in modo elegante ed efficiente queste operazioni.

Immaginiamo di avere un'applicazione che visualizza una lista di utenti. Per ogni utente, dobbiamo effettuare una chiamata API separata per recuperare i suoi dettagli. Un approccio ingenuo potrebbe comportare l'esecuzione di richieste in successione, causando un tempo di caricamento significativo. mergeMap ci viene in aiuto, permettendo di gestire queste richieste in parallelo, aumentando notevolmente la performance.

mergeMap, noto anche come flatMap, è un operatore di trasformazione che prende un Observable come input e, per ogni valore emesso da questo Observable, crea un nuovo Observable. Invece di aspettare che l'Observable interno completi prima di passare al successivo, mergeMap iscrive ogni Observable interno contemporaneamente. Il risultato è un singolo Observable che emette i valori di tutti gli Observables interni, in ordine di completamento, ma senza la necessità di aspettare la conclusione di ciascuno. Questa caratteristica è particolarmente utile per effettuare chiamate API multiple in parallelo, come nel nostro esempio degli utenti.

Supponiamo di avere un servizio Angular che fornisce un Observable di un array di ID utente:

import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class UserService {
  getUsersIds(): Observable<number[]> {
    // Simula una chiamata API che restituisce un array di ID utente
    return of([1, 2, 3, 4, 5]);
  }

  getUserDetails(userId: number): Observable<User> {
    // Simula una chiamata API che restituisce i dettagli di un utente
    return of({id: userId, name: `User ${userId}`, email: `user${userId}@example.com`});
  }
}

interface User {
  id: number;
  name: string;
  email: string;
}

Ora, per recuperare i dettagli di ogni utente, possiamo usare mergeMap:

import { Component, OnInit } from '@angular/core';
import { UserService } from './user.service';
import { mergeMap, map } from 'rxjs/operators';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-user-list',
  template: `
    <ul>
      <li *ngFor="let user of users$ | async">{{ user.name }}</li>
    </ul>
  `
})
export class UserListComponent implements OnInit {
  users$: Observable<User[]>;

  constructor(private userService: UserService) {}

  ngOnInit() {
    this.users$ = this.userService.getUsersIds().pipe(
      mergeMap(userIds => {
          return from(userIds).pipe(
              mergeMap(userId => this.userService.getUserDetails(userId))
          );
      }),
      toArray()
    );
  }
}

Questo codice esegue una chiamata getUsersIds() per ottenere un array di ID utente. Poi, mergeMap itera su ogni ID e chiama getUserDetails() per ottenere i dettagli dell'utente corrispondente. Infine, toArray() raccoglie tutti i risultati in un singolo array, che viene assegnato a users$. L'asincronicità è gestita in modo pulito grazie all'integrazione di RxJS con Angular. La componente utilizza l'async pipe per gestire la sottoscrizione e l'unsubscribe automatico dell'Observable.

Ma cosa succede se dobbiamo filtrare i dati prima di elaborarli? Entrano in gioco gli operatori di filtraggio, tra cui filter. filter è un operatore che prende una funzione di predicate come argomento. Questa funzione riceve ogni valore emesso dall'Observable e restituisce un booleano. Solo i valori per cui la funzione restituisce true vengono emessi dall'Observable risultante.

Supponiamo di voler visualizzare solo gli utenti con un ID maggiore di 3. Possiamo usare filter per filtrare i risultati prima di assegnarli alla componente:

this.users$ = this.userService.getUsersIds().pipe(
  mergeMap(userIds => from(userIds).pipe(
    mergeMap(userId => this.userService.getUserDetails(userId)),
    filter(user => user.id > 3)
  )),
  toArray()
);

Aggiungendo .pipe(filter(user => user.id > 3)) dopo il mergeMap interno, filtriamo i risultati, assicurandoci che solo gli utenti con ID maggiore di 3 siano inclusi nel flusso di dati finale.

In conclusione, mergeMap e filter sono due potenti strumenti di RxJS che ci permettono di gestire in modo efficiente e scalabile la complessità dei flussi di dati asincroni in Angular. L'uso combinato di questi operatori ci consente di eseguire operazioni parallele e filtrare i dati secondo le nostre necessità, creando applicazioni Angular più performanti e manutenibili. L'approccio reattivo e dichiarativo di RxJS facilita la gestione dell'asincronicità, rendendo il codice più pulito e facile da capire, migliorando l'esperienza di sviluppo e garantendo un'applicazione più robusta e scalabile.