RxJS - Dernières mises à jour

Nous utilisons RxJS version 6 dans ce tutoriel. RxJS est couramment utilisé pour gérer la programmation réactive et utilisé plus souvent avec Angular, ReactJS. Angular 6 charge rxjs6 par défaut.

La version 5 de RxJS a été gérée différemment par rapport à la version 6. Le code se cassera si vous mettez à jour votre RxJS 5 vers 6. Dans ce chapitre, nous allons voir la différence dans la manière de gérer la mise à jour de la version.

Si vous mettez à jour RxJS vers 6 et que vous ne souhaitez pas modifier le code, vous pouvez le faire également et vous devrez installer le package suivant.

npm install --save-dev rxjs-compact

Ce package se chargera de fournir une compatibilité descendante et l'ancien code fonctionnera correctement avec RxJS version 6. Si vous souhaitez apporter les modifications de code qui fonctionnent correctement avec RxJS 6, voici les modifications à effectuer.

Les paquets pour les opérateurs, les observables, le sujet ont été restructurés et, par conséquent, les changements majeurs concernent les importations et ils sont expliqués ci-dessous.

Importations pour les opérateurs

Conformément à la version 5, pour les opérateurs, les instructions d'importation suivantes doivent être incluses -

import 'rxjs/add/operator/mapTo'
import 'rxjs/add/operator/take'
import 'rxjs/add/operator/tap'
import 'rxjs/add/operator/map'

Dans RxJS version 6, les importations seront les suivantes -

import {mapTo, take, tap, map} from "rxjs/operators"

Importation de méthodes pour créer des observables

Selon la version 5, tout en travaillant avec Observables, les méthodes d'importation suivantes doivent être incluses -

import "rxjs/add/observable/from";
import "rxjs/add/observable/of";
import "rxjs/add/observable/fromEvent";
import "rxjs/add/observable/interval";

Dans RxJS version 6, les importations seront les suivantes -

import {from, of, fromEvent, interval} from 'rxjs';

Importation d'observables

Dans RxJS version 5, tout en travaillant avec Observables, les instructions d'importation suivantes doivent être incluses -

import { Observable } from 'rxjs/Observable'

Dans RxJS version 6, les importations seront les suivantes -

import { Observable } from 'rxjs'

Importation du sujet

Dans RxJS version 5, le sujet doit être inclus comme suit -

import { Subject} from 'rxjs/Subject'

Dans RxJS version 6, les importations seront les suivantes -

import { Subject } from 'rxjs'

Comment utiliser les opérateurs dans RxJS 6?

pipe() methodest disponible sur l'observable créée. Il est ajouté à RxJS à partir de la version 5.5. En utilisant pipe (), vous pouvez maintenant travailler sur plusieurs opérateurs ensemble dans un ordre séquentiel. C'est ainsi que les opérateurs ont été utilisés dans RxJS version 5.

Exemple

import "rxjs/add/observable/from";
import 'rxjs/add/operator/max'

let list1 = [1, 6, 15, 10, 58, 2, 40];
from(list1).max((a,b)=>a-b).subscribe(x => console.log("The Max value is "+x));

A partir de la version 5.5 de RxJS, nous devons utiliser pipe () pour exécuter l'opérateur -

Exemple

import { from } from 'rxjs';
import { max } from 'rxjs/operators';

from(list1).pipe(max((a,b)=>a-b)).subscribe(x => console.log(
   "The Max value is "+x)
);

Opérateurs renommés

Lors de la restructuration des packages, certains opérateurs ont été renommés car ils étaient en conflit ou correspondant à des mots-clés javascript. La liste est comme indiqué ci-dessous -

Opérateur	Renommé en
faire()	robinet()
capture()	catchError ()
commutateur()	switchAll ()
enfin()	finaliser()
jeter()	throwError ()