angular - change - Para qué sirve la tubería en rxJS

observable angular 4 ejemplo

Question

Creo que tengo el concepto base, pero hay algunas dudas

Entonces, en general, así es como uso un observable:

observable.subscribe(x => {
})

Si quiero filtrar datos, puedo usar esto:

import { first, last, map, reduce, find, skipWhile } from ''rxjs/operators'';
observable.pipe(
map(x => {return x}),
first()
).subscribe(x => {
})

También puedo hacer esto:

import ''rxjs/add/operator/map'';
import ''rxjs/add/operator/first'';
observable.map(x => {return x}).first().subscribe(x => {
})

Entonces mis preguntas son:

1. ¿Cuál es la diferencia?
2. Si no hay diferencia, ¿por qué existe la tubería de función?
3. ¿Por qué esas funciones necesitan diferentes importaciones?

Answer 1

Los operadores "pipables" (anteriormente "lettable") son la forma actual y recomendada de utilizar operadores desde RxJS 5.5.

Le recomiendo que lea la documentación oficial https://github.com/ReactiveX/rxjs/blob/master/doc/pipeable-operators.md

La principal diferencia es que es más fácil hacer operadores personalizados y que es mejor mover los árboles sin alterar algún objeto Observable global que podría hacer colisiones si dos partes diferentes quisieran crear un operador con el mismo nombre.

Usar una declaración de import separada para cada operador ''rxjs/add/operator/first'' fue una forma de hacer paquetes de aplicaciones más pequeños. Al importar solo los operadores que necesita en lugar de toda la biblioteca RxJS, puede reducir significativamente el tamaño total del paquete. Sin embargo, el compilador no puede saber si importó ''rxjs/add/operator/first'' porque realmente lo necesita en su código o simplemente olvidó eliminarlo cuando refactoriza su código. Esa es una de las ventajas de usar operadores apilables donde las importaciones no utilizadas se ignoran automáticamente.

Answer 2

El método de la tubería

Todo esto se ve genial, pero sigue siendo muy detallado. Bueno, gracias a RxJS 5.5 observables ahora tienen un método de tubería disponible en las instancias que le permite limpiar el código anterior llamando a tubería con todos nuestros operadores de funciones puras:

Qué significa eso?

Eso significa que todos los operadores que utilizó anteriormente en la instancia de observable están disponibles como funciones puras en rxjs/operators . Esto hace que construir una composición de operadores o reutilizar operadores se vuelva realmente fácil, sin tener que recurrir a todo tipo de gimnasia de programación donde tienes que crear un Observable extensible observable personalizado, luego sobrescribir el levantamiento solo para hacer tu propia cosa personalizada.

const { Observable } = require(''rxjs/Rx'')
const { filter, map, reduce, } = require(''rxjs/operators'')
const { pipe } = require(''rxjs/Rx'')
const filterOutEvens = filter(x => x % 2)
const doubleBy = x => map(value => value * x);
const sum = reduce((acc, next) => acc + next, 0);
const source$ = Observable.range(0, 10)
source$.pipe(
filterOutEvens,
doubleBy(2),
sum)
.subscribe(console.log); // 50