RxJS è la libreria Javascript che consente di sviluppare utilizzando una metodologia chiamata Reactive Programming, la quale utilizza gli Observable per la gestione di codice asincrono e callback. L'operazione che da il via a una pipeline creata a partire da un Observable è l'operazione subscribe, la quale crea una sottoscrizione allo stream e ne riceve i risultati.

L'operazione di interazione più conosciuta è la map. Supponendo di avere un Observable che emetta una sequenza di numeri, possiamo modificarne il risultato con la seguente scrittura.

// 1,2,3,4
myObs$.pipe(
  map(x=>x*2)
)
.subscribe(x=>console.log(x));
// 2,4,6,8

L'operatore map funziona correttamente se l'operazione al suo interno è asincrona. Nel caso di un'operazione asincrona, abbiamo bisogno di utilizzare un altro metodo che riesca a gestire la Subscription generata dalla sottoscrizione al secondo Observable. Il codice di seguito è fortemente sconsigliato, in quanto all'interno dello stream, a ogni emissione si va creare una subscription non gestita.

myObs$.pipe(
  tap(x=>{
    otherOps(x).subscribe(x=>console.log(x));
  })
)
.subscribe();

// oppure

myObs$.pipe(
  map(x=>otherOps(x))
)
.subscribe(r => r.subscribe(x=>console.log(x)));

Per poter gestire il flusso di Observable in modo corretto e più pulito, RxJS ci mette a disposizione tre diversi operatori:

• mergeMap: consente la sottoscrizione automatica alla seconda Observable, prendendosi carico della gestione della sua subscription. Non garantisce l'ordine di emissione, se la subscription ha casi in cui la computazione richieda più tempo. Caso d'uso: inserimento articoli in un carrello - ogni sottoscrizione deve completarsi.

  myObs$.pipe(
    mergeMap(x=>
      otherOps(x)
    )
  )
  .subscribe(x=>console.log(x));

• switchMap: comportamento simile alla MergeMap, ma all'arrivo di un nuovo dato dalla prima Observable, la sottoscrizione alla seconda viene cancellata e risottoscritta. Caso d'uso: gestione azioni utente - quando l'utente esegue più volte un'azione, e a ogni ripetizione il flusso corrente deve essere bloccato e re-iniziare.

  myObs$.pipe(
    switchMap(x=>
      otherOps(x)
    )
  )
  .subscribe(x=>console.log(x));

• concatMap: diversamente dalla switchMap, prima di risottoscriversi alla seconda subscription attende il completamento del flusso precedente. Contrariamente alla MergeMap, garantisce l'uniformità tra ordine di ingresso e ordine di emissione. Caso d'uso: conversione di numeri - ogni sequenza deve completarsi e al termine voglio poter analizzare l'output sulla base dell'input

  myObs$.pipe(
    concatMap(x=>
      otherOps(x)
    )
  )
  .subscribe(x=>console.log(x));