RxJS - tutoriel 5 : combiner vos flux avec les opérateurs combineLatest(), withLatestFrom() et zip()

Certaines applications peuvent nécessiter de combiner les valeurs générées par deux flux différents. Qu'il s'agisse de poids/puissance ou de qualités/prix, vous devez disposer d'une paire de valeurs avant de pouvoir poursuivre. RxJS vous fournit de nouveau les opérateurs qui vous simplifieront la vie. La difficulté réside alors dans le fait de bien comprendre la différence entre combineLatest(), withLatestFrom() et zip() pour ne citer que ceux-là.

L'opérateur combineLatest()

L'opérateur combineLatest() commence par produire des valeurs dès qu'il dispose d'une valeur en provenance de chacun des flux à combiner, puis produit une nouvelle valeur dès qu'un des flux produit une nouvelle valeur.

L'opérateur withLatestFrom()

L'opérateur withLatestFrom() favorise un flux, celui situé à sa gauche, puis associe la valeur du flux favorisé avec la dernière valeur produite par le flux se trouvant à sa droite.

L'opérateur zip()

Quant à zip(), comme son nom l'indique (zip signifie "fermeture éclaire" en anglais), cet opérateur associera chaque valeur d'un flux avec la valeur de l'autre flux, comme le fait une fermeture éclaire avec chacune de ses attaches : les premières avec les premières, les deuxièmes avec les deuxièmes, les nth avec les nth ... .

Marble diagrams

Pour mieux comprendre les flux, nous aborderons également les marble diagrams : ils permettent de représenter graphiquement des flux dans le temps.