Manipulez les émissions avec les opérateurs bas niveau

Les Observables occupent une place très importante dans le framework d'Angular, et nous permettent de créer des fonctionnalités très avancées et complexes beaucoup plus facilement. Il est donc essentiel de maîtriser la manipulation de ces Observables. Cette manipulation se fait avec les opérateurs.

Il existe deux types principaux d'opérateurs :

• les opérateurs bas niveau – ces opérateurs touchent aux émissions directement, généralement pour transformer ou filtrer ces émissions, et sont le sujet de ce chapitre ;

• les opérateurs haut niveau – ces opérateurs touchent à l'Observable lui-même, et nous en parlerons dans le prochain chapitre.

Avant de plonger dans les opérateurs eux-mêmes, regardons comment on branche des opérateurs à un Observable.

Branchez le tuyau

Pour appliquer des opérateurs à un Observable, on les passe, dans l'ordre, à une méthode qui s'appellepipe() :

const modifiedObservable$ = originalObservable$.pipe(
    firstOperator(),
    secondOperator(arguments),
    thirdOperator
);

Vous créez un nouvel Observable en branchant un "tuyau" à un autre Observable et en y ajoutant les opérateurs que vous voulez y ajouter. Le concept de "tuyau", pipe, en anglais, est très utile : chaque émission de l'Observable traverse le tuyau et donc les opérateurs dans l'ordre.

Regardons un exemple concret.

Transformez les émissions

Le premier opérateur que vous allez utiliser est l'opérateurmap()qui permet de transformer les émissions d'un Observable.

Utilisons notre Observableinterval$ pour un premier exemple simple :

interval$ = interval(1000).pipe(
    map(value => value * 10)
);

On passe donc une fonction à l'opérateurmap()qui définit la transformation à effectuer. Ici, on multiplie chaque émission par 10.

Essayons quelque chose d'un peu plus complexe :

this.interval$ = interval(1000).pipe(
    map(value => value % 2 === 0 ?
        `Je suis ${value} et je suis pair` :
        `Je suis ${value} et je suis impair`
    )
);

Mais ça ne compile pas ! Pourquoi ? Parce qu'on a dit queinterval$allait émettre desnumber, et ici on lui demande d'émettre unestring! C'est bien l'émission finale qui définit le type de l'Observable global. Modifiez donc le type d'interval$:

interval$!: Observable<string>;

Ainsi l'application compile et donne :

Pendant la suite du cours, vous serez amené à utiliser l'opérateurmap()à plusieurs reprises.

Filtrez les émissions

L'opérateurfilter()permet de filtrer les émissions, laissant passer uniquement celles qui vous intéressent. Importez-le depuisrxjset ajoutez-le àinterval$:

this.interval$ = interval(1000).pipe(
    filter(value => value % 5 === 0),
    map(value => value % 2 === 0 ?
        `Je suis ${value} et je suis pair` :
        `Je suis ${value} et je suis impair`
    )
);

Ainsi, on filtre toutes les émissions de l'Observable de base qui ne sont pas divisibles par 5. Ces émissions sont ensuite transformées comme avant en chaîne de caractères.

Créez des effets secondaires

En programmation réactive, un effet secondaire est une fonction qui fait quelque chose avec les émissions d'un Observable sans les modifier. Pour ajouter un effet secondaire à un Observable, on utilise l'opérateurtap().

Créez d'abord la méthode qui sera appelée par votre effet secondaire :

logger(text: string): void {
    console.log(`LOG: ${text}`);
}

Maintenant, en importanttapdepuisrxjs/operators, ajoutez l'opérateur àinterval$:

this.interval$ = interval(1000).pipe(
    filter(value => value % 3 === 0),
    map(value => value % 2 === 0 ?
        `Je suis ${value} et je suis pair` :
        `Je suis ${value} et je suis impair`
    ),
    tap(text => this.logger(text))
);

Avec ça, dans la console, vous avez :

À vous de jouer !

Contexte

Vous allez apporter des améliorations au component que vous avez créé dans le chapitre précédent (ou, le cas échéant, à celui qui est fourni avec l'application d'accompagnement : Soyez réactif avec les Observables).

Consignes

Voici les améliorations à apporter :

• pour ne pas bombarder l'utilisateur, on souhaite que le message ne change que toutes les 5 secondes

• on veut refactoriser le component pour que le texte "Vous êtes connecté·e depuis X secondes" soit émis par l'Observable et pour qu'il ne soit plus défini dans le template

• chaque message émis à l'utilisateur doit être loggé à la console

En résumé

• Les opérateurs sont passés à la fonctionpipe()des Observables ;

• L'opérateurmap()permet de transformer les émissions d'un Observable ;

• L'opérateurfilter()permet de filtrer les émissions d'un Observable ;

• L'opérateurtap()permet d'ajouter des effets secondaires à un Observable.

Passons maintenant aux opérateurs haut niveau – rendez-vous au chapitre suivant !