Quali operatori per lavorare con i flussi conosci?

Gli operatori per lavorare con i flussi di dati, particolarmente rilevanti nel contesto della programmazione asincrona e delle librerie reattive (come RxJS), possono essere suddivisi in diverse categorie.

Operatori di creazione (Creation Operators): Utilizzati per creare un nuovo flusso di dati.

• of(): Crea un flusso che emette un insieme fisso di valori.

  // Di RxJS
  import { of } from 'rxjs';
  
  const source = of(1, 2, 3); // Flusso che emette 1, 2, 3
  

• from(): Trasforma diverse fonti di dati (Promise, Iterable, ArrayLike) in un flusso.

  // Di RxJS
  import { from } from 'rxjs';
  
  const source = from([10, 20, 30]); // Flusso da un array
  

• interval(): Crea un flusso che emette numeri sequenziali a intervalli di tempo definiti.

  // Di RxJS
  import { interval } from 'rxjs';
  
  const source = interval(1000); // Flusso che emette numeri ogni secondo
  

• timer(): Crea un flusso che emette un valore dopo un tempo definito, eventualmente con valori successivi a intervalli.
• fromEvent(): Crea un flusso da eventi DOM o EventEmitter.

Operatori di trasformazione (Transformation Operators): Modificano i valori emessi dal flusso.

• map(): Trasforma ogni valore, applicandogli una funzione.

  // Di RxJS
  import { of } from 'rxjs';
  import { map } from 'rxjs/operators';
  
  const source = of(1, 2, 3);
  const result = source.pipe(map(x => x * 2)); // Flusso con valori 2, 4, 6
  

• pluck(): Estrae una proprietà da ogni oggetto emesso.
• scan(): Applica una funzione di accumulo a ogni valore del flusso e emette i risultati intermedi.
• mergeMap() / flatMap(): Proietta ogni valore del flusso originale in un nuovo flusso (Observable interno) e li combina in un unico flusso di uscita. Permette di eseguire operazioni asincrone per ogni valore.

  // Di RxJS
  import { of } from 'rxjs';
  import { mergeMap } from 'rxjs/operators';
  
  const source = of(1, 2);
  const result = source.pipe(mergeMap(val => of(val + 'a', val + 'b'))); // Flusso con valori '1a', '1b', '2a', '2b'
  

• switchMap(): Simile a mergeMap, ma al emettere un nuovo valore, annulla il lavoro del precedente flusso interno. Utile per autocompletamento o richieste con cancellazione.
• concatMap(): Simile a mergeMap, ma garantisce che i flussi interni siano eseguiti in sequenza.

Operatori di filtraggio (Filtering Operators): Permettono di passare selettivamente i valori emessi.

• filter(): Passa solo i valori che soddisfano una condizione.

  // Di RxJS
  import { of } from 'rxjs';
  import { filter } from 'rxjs/operators';
  
  const source = of(1, 2, 3, 4);
  const result = source.pipe(filter(x => x % 2 === 0)); // 2, 4
  

• take(): Prende solo i primi N valori.
• takeUntil(): Prende valori finché un altro flusso non emette.
• skip(): Ignora i primi N valori.
• debounceTime(): Emissione di un valore solo dopo che il flusso è rimasto inattivo per un certo tempo. Utile per evitare azioni troppo frequenti.
• distinctUntilChanged(): Emissione di un valore solo se diverso dal precedente.

Operatori di combinazione (Combination Operators): Combinano più flussi in uno.

• combineLatest(): Combina gli ultimi valori di più flussi, emettendo un array con questi ultimi valori ogni volta che uno di essi cambia.
• zip(): Combina i valori di più flussi in un array per indice.
• merge(): Fonde più flussi, emettendo i loro valori non appena arrivano.
• concat(): Esegue più flussi in sequenza.

Operatori di gestione degli errori (Error Handling Operators): Definiscono il comportamento in caso di errori.

• catchError(): Cattura un errore e permette di continuare o sostituire il flusso.

  // Di RxJS
  import { throwError } from 'rxjs';
  import { catchError, of } from 'rxjs/operators';
  
  const source = throwError(() => new Error('Qualcosa è andato storto'));
  const result = source.pipe(catchError(err => of('Errore catturato'))); // Flusso con valore 'Errore catturato'
  

• retry(): Tenta di sottoscrivere N volte di nuovo in caso di errore.

Operatori di completamento (Completion Operators): Definiscono azioni al termine del flusso.

• finalize(): Esegue un'azione al termine o alla cancellazione.
• tap(): Permette effetti collaterali senza modificare i valori.

Questa non è una lista esaustiva, ma copre gli operatori più importanti con cui si lavora frequentemente nello sviluppo frontend, specialmente con approccio reattivo.