By: Evan Boissonnot
22 janvier 2021
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 émis 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 émette 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));
Pour précision, le from permet de construire une Observable avec une émission pour chaque élément dans un tableau.
