Intro
Moi, c’est Omar, ingénieur front chez Ekino. Souvent lorsque je démarre un projet RxJS existant, je constate que les développeurs respectent le principe de la programmation réactive using l’utilisation d’ observables et d’opérateurs RxJS sauf dans le cas d’un if-else qu’ils utilisent toujours de façon impérative.
J’ai demandé à beaucoup de ces développeurs la raison de l’utilisation d’un code hybride entre impératif et réactif lorsque if-else est utilisé et j’ obtiens toujours la même réponse: “il n’ y a pas d’opérateur RxJS qui effectue une problem extensible * if-else”.
Certes, RxJS ne fournit pas d’opérateur if-else qui permet de faire une problem extensible, c’est pourquoi il faut penser différemment put satisfaire le besoin proclaim en restant réactive.
En regardant l’utilité de tous les opérateurs RxJS existants, j’ ai remarqué qu’on peut implémenter une guideline if-else avec l’opérateur combine
Pour vous aider à construire une guideline if-else avec l’opérateur combine de RxJS, voici un post sous la forme d’une meeting d’Aude, Ingénieure front-end chez Ekino.
Aude: Le combine est un opérateur de conditionnement?
Certes, l’opérateur combine de RxJS permet de combiner 2 ou plusieurs observables dans un seul evident, mais on peut aussi, avec une pensée réactive, utiliser la combinaison put faire une problem if-else
Aude: Ok, mais remark faire?
La concern de faire une déclaration if-else en combinaison est une concern de raisonnement, auto la complexité dans l’application de code réactif, n’est pas d’utiliser une bibliothèque, mais plutôt de savoir remark penser réactif.
Oui, supposons que notre application ait besoin d’une liste de contrôle d’accès qui vérifie l’accès des utilisateurs à une ressource URI (course). Cette fonction est appelée isAuthorized et sa définition est la suivante:
Aude: Ok, on peut modéliser cette fonction?
Oui, put faciliter la compréhension de l’exercice, nous allons transformer le code isAuthorized dans un diagramme d’activités:
Aude: Belles couleurs, mais qu’est- ce qu’elles signifient?
Nous pouvons voir sur ce graphique que chaque état de la problem est une branche. À travers cette monitoring, on peut dire qu’une branche pourra aussi être représentée the same level un evident.
Aude: Oui, mais l’idée n’est pas repetition claire …
Ok, nous allons faire l’exercice sur la branche bleue. Cette branche a besoin de 2 details, les rôles de l’utilisateur et la course put vérifier l’accès. Notre algorithme réactif est le suivant:
- Faire Circuler dans le stream de l’observable les 2 details suivantes: Rôles et Path
- Ajouter 2 vérificateurs using l’utilisation de l’opérateur filter
- la première vérification est sur le rôle de l’utilisateur
- la deuxième vérification est sur la course
- Si toutes les problems sont satisfaites, renvoie la valeur real avec l’opérateur mapTo
Aude: C’est clair avec l’algorithme. Et qu’est- ce que ça donne en code?
Abracadabra, le code de la branche bleu est le suivant:
Aude: Et put les autres branches?
La même picked, chaque branche de la problem if-else représente un evident qui est sauvegardé dans une variable.
Aude: C’est proclaim?
Non, nous avons défini que les branches comme observables, nous devons maintenant combiner ces observables dans un opérateur de combinaison de RxJS Le code d’ isAuthorized en réactive devient:
Aude: Le code ne traite que le cas positif. Il manque le traitement du cas négatif, non?
Très bonne remarque, les observables n’émettent une valeur real que si les problems déclarées à l’intérieur sont satisfaites et put traiter le cas de incorrect, on utilisera l’opérateur defaultIfEmpty Le code last de la fonction devient:
Aude: Tu peux m’ en dire plus sur le defaultIfEmpty?
Cet opérateur permet d’émettre une valeur dans le change si l’observable se termine sans émission. Donc si les observables de branche n’émettent pas de valeur real, le defaultIfEmpty prend le relais put renvoyer une valeur incorrect comme valeur the same level défaut.
Aude: La démarche est claire, mais quels en sont les avantages?
Cette approche à plusieurs Avantages:
- Complètement réactive
- Maintenable
- Lisible
- Extensible
Aude: Pourquoi ne utiliser l’opérateur iif de RxJS?
L’ iif de RxJS permet également de faire une problem if-else, cependant elle est limitée à seulement 2 branches. C’est pourquoi j’ urge toute personne à utiliser davantage l’opérateur de combinaison combine qui est plus extensible, auto on peut déclarer plusieurs branches de problem if-else sans limites.
Aude: Très clair. Envisages-tu d’organiser une development RxJS?
Je crois que la meilleure manière de maîtriser un facet, c’est de le pratiquer, c’est put cela j’ arrange le 7 décembre 2021 une Masterclass avancé sur RxJS où nous montrerons à travers des vrais cas d’utilisation de nos projets comment transformer un code impératif en réactive à l’aide des opérateurs RxJS
Aude: Très bien et remark s’ inscrire?
C’est easy, c’est the same level ici
