RxJS - Últimas actualizaciones

Estamos usando la versión 6 de RxJS en este tutorial. RxJS se usa comúnmente para lidiar con la programación reactiva y se usa más a menudo con Angular, ReactJS. Angular 6 carga rxjs6 por defecto.

La versión 5 de RxJS se manejó de manera diferente en comparación con la versión 6. El código se romperá en caso de que actualice su RxJS 5 a 6. En este capítulo, veremos la diferencia en las formas de manejar la actualización de la versión.

En caso de que esté actualizando RxJS a 6 y no desee realizar cambios en el código, también puede hacerlo y tendrá que instalar el siguiente paquete.

npm install --save-dev rxjs-compact

Este paquete se encargará de proporcionar compatibilidad con versiones anteriores y el código antiguo funcionará bien con la versión 6 de RxJS. Si desea realizar los cambios de código que funcionan bien con RxJS 6, aquí están los cambios que deben realizarse.

Se reestructuraron los paquetes para operadores, observables, sujeto y por lo tanto, los principales cambios entran para las importaciones y se explican a continuación.

Importaciones para operadores

Según la versión 5, para los operadores se deben incluir las siguientes declaraciones de importación:

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

En la versión 6 de RxJS, las importaciones serán las siguientes:

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

Importación de métodos para crear observables

Según la versión 5, al trabajar con Observables, se deben incluir los siguientes métodos de importación:

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

En la versión 6 de RxJS, las importaciones serán las siguientes:

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

Importación de observables

En RxJS versión 5, mientras trabaja con Observables, se deben incluir las siguientes declaraciones de importación:

import { Observable } from 'rxjs/Observable'

En la versión 6 de RxJS, las importaciones serán las siguientes:

import { Observable } from 'rxjs'

Importación del tema

En la versión 5 de RxJS, el tema debe incluirse de la siguiente manera:

import { Subject} from 'rxjs/Subject'

En la versión 6 de RxJS, las importaciones serán las siguientes:

import { Subject } from 'rxjs'

¿Cómo usar operadores en RxJS 6?

pipe() methodestá disponible en el observable creado. Se agrega a RxJS desde la versión 5.5. Usando pipe () ahora puede trabajar en múltiples operadores juntos en orden secuencial. Así es como se utilizaron los operadores en la versión 5 de RxJS.

Ejemplo

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));

Desde la versión 5.5 de RxJS en adelante, tenemos que usar pipe () para ejecutar el operador -

Ejemplo

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)
);

Operadores renombrados

Durante la reestructuración de los paquetes, algunos de los operadores fueron renombrados porque estaban en conflicto o coincidían con palabras clave de JavaScript. La lista es la que se muestra a continuación:

Operador	Renombrado a
hacer()	grifo()
captura()	catchError ()
cambiar()	switchAll ()
finalmente()	finalizar()
lanzar()	throwError ()