Maintenant que nous avons saisi l’intérêt des operators de RxJs avec map et tap, voyons troisième, qui est très pratique pour sélectionner ce qui est réellement émi en résultat dans notre pipe : filter.

Bien comprendre l’Observable

Rappelons de nouveau ce qu’est une observable : c’est un tuyau d’émission où un souscriveur va attendre qu’on lui émetter des informations.

Vu que l’on peut émettre à l’infini, au rythme que l’on souhaite, on va recevoir des données lorsque l’on souscrit que l’on aimerait filtrer.

La tentation du if

Lorsque l’on commence à utiliser les Observable, et vu que l’on a appris qu’il faut subscribe pour commencer à recevoir les émissions, on va acquérir ce réflexe.
Et donc, on va écrire tout le code de traitement dans le subscribe.

C’est une bonne première méthode, ET en même temps ce n’est pas très Reactive, très fonctionnel.

Penser fonction – Le principe des Observables et du filter

En fait, les operators ne sont que des fonctions, des fonctions pures de projection.

Donc l’idée ici, quand on va vouloir filtrer les émissions c’est surtout de bien utiliser les operators, et donc de préparer les données que l’on souhaite recevoir avec le subscribe dans le pipe !

Un exemple sans filter

Nous voulons ici filtrer les wookies uniquement supérieurs à 3 mètres (300 cm)

const wookies$ = from([ { surname: 'Chewie', size: 250 }, { surname: 'Aktar', size: 350 }, { surname: 'Chewa', size: 290 } ]);
wookies$.subscribe(item => {
if (item.size > 300) {
this.wookiesTresGrands.push(item);
}
});

Le même exemple avec filter

const wookies$ = from([ { surname: 'Chewie', size: 250 }, { surname: 'Aktar', size: 350 }, { surname: 'Chewa', size: 290 } ]);
wookies$.pipe(
filter(item => item.size > 300)
).subscribe(item => this.wookiesTresGrands.push(item));

Hébergé par Ausha. Visitez ausha.co/politique-de-confidentialite pour plus d'informations.