Skip to content
On this page

Comment utiliser reduce avec RxJS ?

L'opérateur reduce() est l'un des opérateurs couramment utilisés avec les observables pour effectuer des opérations d'agrégation sur les données en flux continu.

Voici comment utiliser l'opérateur reduce() avec un observable :

js
const numbers = [1, 2, 3, 4, 5];

const numbers$ = Rx.Observable.from(numbers);

const sum = numbers$.reduce((acc, x) => acc + x, 0);

sum.subscribe(x => console.log(x));  // 15

Dans cet exemple, l'observable numbers$ est créé à partir du tableau numbers en utilisant la fonction from(). L'opérateur reduce() est ensuite utilisé pour produire une valeur agrégée à partir de la séquence de valeurs produites par l'observable numbers$. La fonction d'accumulation utilisée est (acc, x) => acc + x, ce qui signifie que l'opérateur ajoute la valeur courante à la valeur accumulée précédente à chaque itération. Le résultat final est une valeur agrégée qui représente la somme de toutes les valeurs dans le tableau numbers.

Enfin, la méthode subscribe() est utilisée pour souscrire à la valeur agrégée produite par l'opérateur reduce(). La fonction passée à la méthode subscribe() est appelée lorsque la valeur finale est produite, et peut être utilisée pour traiter la valeur agrégée de manière appropriée. Dans cet exemple, la fonction simplement affiche la valeur finale à l'aide de console.log().

Quelle différence entre scan et reduce avec RxJS ?

RxJS est une bibliothèque JavaScript pour la programmation asynchrone basée sur les "observables". Les opérateurs scan() et reduce() sont deux opérateurs couramment utilisés avec les observables pour effectuer des opérations de transformation et d'agrégation sur les données en flux continu.

Bien que ces deux opérateurs puissent être utilisés pour effectuer des opérations similaires, il y a quelques différences importantes entre eux :

  • L'opérateur scan() est utilisé pour produire une valeur agrégée à partir d'une séquence de valeurs en utilisant une fonction d'accumulation. À chaque itération, l'opérateur scan() applique la fonction d'accumulation à la valeur courante et à la valeur accumulée précédente, puis produit la nouvelle valeur accumulée. Cela signifie que l'opérateur scan() produit une séquence de valeurs agrégées au fur et à mesure que les valeurs originales arrivent.

  • L'opérateur reduce() est également utilisé pour produire une valeur agrégée à partir d'une séquence de valeurs en utilisant une fonction d'accumulation. Cependant, contrairement à l'opérateur scan(), l'opérateur reduce() ne produit qu'une seule valeur en sortie. Il applique la fonction d'accumulation à toutes les valeurs d'entrée en une seule itération, et produit la valeur agrégée finale. Cela signifie que l'opérateur reduce() ne produit qu'une seule valeur en sortie, qui représente l'agrégat de toutes les valeurs d'entrée.

Voici un exemple simple qui montre comment utiliser ces deux opérateurs pour calculer la somme des nombres dans un tableau :

js
const numbers = [1, 2, 3, 4, 5];

const sum1 = numbers.reduce((acc, x) => acc + x, 0);  // 15

const sum2 = numbers.scan((acc, x) => acc + x, 0);  // [1, 3, 6, 10, 15]

Dans cet exemple, l'opérateur reduce() est utilisé pour calculer la somme des nombres dans le tableau numbers en une seule itération. Le résultat final est la valeur agrégée, qui est 15.

L'opérateur scan() est utilisé pour calculer la somme des nombres dans le tableau numbers en utilisant une fonction d'accumulation. À chaque itération, l'opérateur scan() est utilisé pour calculer la somme des nombres dans un tableau en utilisant une fonction d'accumulation. À chaque itération, l'opérateur scan() applique la fonction d'accumulation à la valeur courante et à la valeur accumulée précédente, puis produit la nouvelle valeur accumulée. Cela signifie que l'opérateur scan() produit une séquence de valeurs agrégées au fur et à mesure que les valeurs originales arrivent.