RxJS: Defer

RxJS: Defer

In questo articolo vorrei spiegare il metodo Defer della libreria RxJS. Prima di procedere con ciò, farò una piccola introduzione su che cos’è RxJS è perché è importante conoscerla (magari quanto prima farò un articolo dedicato esclusivamente a tale libreria).

La libreria RxJS:

RxJS (Reactive Extensions for JavaScript) è una libreria che ha come paradigma la programmazione asincrona e reattiva che sfrutta dei costrutti chiamati Observable, per facilitare la creazione di codice asincrono e callback. Gli stessi ci permettono di prelevare dati da un database, richiamando un determinato endpoint. Ad esempio se abbiamo una SPA (Single Page Application), la quale ha il compito di gestire una struttura universitaria, possiamo usare gli Observable per il recupero delle lezioni per un determinato giorno, oppure gli avvisi del giorno e così via. Per iniziare a monitorare tali dati bisogna iscriversi/abbonarsi tale azione nel mondo RxJS viene definita da una Subscribe.
In applicazioni come Angular queste operazioni, ovvero la creazione di un Observable e la sottoscrizione successiva, non viene utilizzata solo per il reperimento dati da una fonte esterna, bensì sono utilizzate anche per il cambio di rotte (url) oppure per la comunicazione tra le varie componenti di Angular.
Detto ciò, gli Observable possono essere creati in diversi modi, con quelli che vengono definiti operatori (ajax, of, defer, create, interval, ecc…). Quello di cui vi parlerò è il metodo, meglio dire funzione, Defer.

Defer:

Defer crea un Observable solo quando un Observer si sottoscrive, creando un nuovo Observable per Observer/Abbonato. Tipicamente la creazione dell’Observable avviene tramite una observableFactory. Quello che si può pensare e che ogni Observer si sottoscrive allo stesso Observable ma non è così, ogni abbonato riceve un Observable individuale. Inoltre, proprio per le caratteristiche descritte adesso, defer viene definito un operatore “pigro” (Lazy).
Di seguito un esempi di utilizzo:

import {map } from 'rxjs/operators';
import {of, defer} from 'rxjs';
 
const myObservable$ = defer(() => {
  return Math.random() > 0.5
    ? of('A','B','C','D','E').pipe(map(letter => letter.toLowerCase()))
    : of('a','b','c','d','e').pipe(map(letter => letter.toUpperCase()));
});
observable$.subscribe(x => console.log(x)); 

Nel momento in cui l’observer myObservable$ (notare la convenzione del dollaro per variabili di tipo Observable) si sottoscrive, il metodo Defer entra in azione creando un Observable in base ad un semplice ternario. Nello specifico, se il numero random e maggiore di 0.5 le lettere vengono trasformate in lowercase altrimenti in uppercase.
Come mostra l’esempio l’operatore Defer è utile usarlo nel momento in cui si ha la necessità di creare un Observable in funzione di una o più condizioni.

CONCLUSIONI:

Spero che l’articolo sia stato di vostro gradimento. Condividetelo sui vostri social e se vi va lasciate un commento. Vi ringrazio per la lettura e per la visita. Mi raccomando sempre #programmingModeOn