Operadores no tan comunes de Rxjs

Despus de dar un vistazo a los operadores comunes en Rxjs, esta vez es el turno de algunos operadores que no son tan comunes, tal vez desconocidos por algunos devs, pero muy utiles a la hora de agregar un comportamiento a nuestros Observables.

first

El operador first es un operador de filtrado que emite solo el primer valor que se emite en la secuencia de entrada y luego completa la secuencia.
Tambin es posible especificar una condicin opcional para determinar el primero valor que se emite.

La forma general del operador first es la siguiente:

first(predicate?: function): Observable

El argumento predicate es una funcin que se usa para determinar el primero valor que se emite en la secuencia. Si no se proporciona ninguna funcin predicate el operador first emitir el primero que se emita en la secuencia, teniendo el mismo comportamiento como si usramos el operador take(1).

aqui hay un ejemplo:

import { interval } from 'rxjs'import { first } from 'rxjs/operators';const source = from([1, 2, 3, 4, 5]);const example - source.pipe( first(x => x > 2));example.subscribe(console.log) // salida: 3

En este ejemplo, creamos un Observable que emite los valores 1, 2, 3, 4, 5 y luego aplicamos el operador first con una funcin predicate que devuelve true para el primer valor que sea mayor que 2. El primer valor que se emite en la secuencia que satisface la condicin es 3, por lo que esa es la salida del subscribe.

Es importante tener en cuenta que take completar la secuencia despus de emitir el primer valor, por lo que cualquier valor adicional que se emita despus del primero valor se descartar. Si no se emite ningn valor que satisfaga la condicin, el Observable resultante no emitir ningn valor.

takeWhile

El operador takeWhile es un operador de filtrado que toma los valores emitidos por un Observable hasta que se produce un valor que no satisface una condicin especificada.

La forma general del operador takeWhile es la siguiente:

takeWhile(predicate?: function, inclusive?: boolean): Observable

El argumento predicate es una funcin que se utiliza para evaluar cada valor emitido por el Observable. Si el valor emitido satisface la condicin especificada, se incluir en el resultado. Si el valor no satisface la condicin, la suscripcin se completar y se dejar de emitir valores.

El argumento opcional inclusive se utiliza para incluir o excluir el valor que no cumple la condicin especificada. Si inclusive es true, el valor que no cumple la condicin se incluir en la salida. Si inclusive es false el valor que no cumple la condicin se excluye de la salida.

Por ejemplo:

import { of } from 'rxjs'import { takeWhile } from 'rxjs/operators';const source = of(1, 2, 3, 4, 5);const example - source.pipe( takeWhile(x => x < 4));example.subscribe(console.log) // salida: 1, 2, 3

En este ejemplo, creamos un Observable que emite los valores 1, 2, 3, 4, 5, luego aplicamos el operador takeWhile con una funcin predicate que evala si cada valor emitido es menor que 4. El operador takeWhile incluir los valores 1, 2 y 3 pero detendr la emisin de valores despus de que se emita el valor 4 que no cumple la condicin.

Tambin es posible usar el argumento opcional inclusive para incluir o excluir el valor que no cumple la condicin especificada. Por ejemplo:

import { of } from 'rxjs'import { takeWhile } from 'rxjs/operators';const source = of(1, 2, 3, 4, 5);const example - source.pipe( takeWhile(x => x < 4, true));example.subscribe(console.log) // salida: 1, 2, 3, 4

Donde en este caso el valor 4 a pesar de que no cumple la condicin sera emitido por el por el Observable y detendr la emisin de valores despus de que se emita el valor 5 que no cumple la condicin.

takeUntil

El operador takeUntil es un operador de finalizacin que emite valores de un Observable hasta que se emite un evento desde otro Observable.

La forma general del operador takeWhile es la siguiente:

takeUntil(notifier: Observable): Observable

El argumento notifier es un Observable que se utiliza para emitir un evento que indica que la emisin del Observable de origen debe finalizar. Cuando el notifier emite un valor o completa, el Observable de origin se completa y ya no se emiten mas valores.

Esta seria su grifa de canicas:

Aqu hay un ejemplo:

import { interval, timer } from 'rxjs';import { takeUntil } from 'rxjs/operators';const source = interval(1000);const stopTimer = timer(5000);const example = source.pipe( takeUntil(stopTimer));example.subscribe(console.log) // salida: 0, 1, 2, 3, 4

En este ejemplo, creamos un Observable que emite valores cada segundo utilizando interval(1000), luego, creamos un Observable que completa despus de 5 segundos utilizando timer(5000). Finalmente, aplicamos el operador takeUntil con el notifier stopTimer que completar la emisin del Observable de origin despus de 5 segundos.

El resultado es que solo se emiten los primeros 5 valores del Observable de origen, ya que la emisin se detiene despus de que el notifier stopTimer emite un valor y completa.

Tambin podemos usar otros Observable como notifier para finalizar la emisin del Observable de origen, como un botn pulsado, una respuesta de una API, una conexin de red que se interrumpe, etc.

skip

El operador skip se utiliza para omitir los primeros elementos de un Observable y emitir los restantes.

La forma general del operador skip es la siguiente:

skip(count: number): Observable

El argumento count es un nmero entero que indica el nmero de elementos que se deben omitir antes de comenzar a emitir elementos.

Esta es la grafica de canicas para el operador skip:

Aqui un ejemplo:

import { of } from 'rxjs';import { skip } from 'rxjs/operators';const source = of(1, 2, 3, 4, 5);const example = source.pipe(skip(3));example.subscribe(console.log); // salida: 4, 5

En este ejemplo creamos un Observable que emite los valores 1, 2, 3, 4, 5 utilizando of(1, 2, 3, 4, 5) luego aplicamos el operador skip con un valor de 3, lo que significa que se omitirn los primeros 3 valores. La salida del Observable resultante es 4 y 5.

Tambin podemos usar expresiones lgicas ms complejas para determinar qu elementos se deben omitir. Por ejemplo, podramos usar una expresin lambda que devuelve verdadero o falso en funcin de las propiedades de los elementos.

Es importante tener en cuenta que si el nmero de elementos a omitir es mayor o igual que el nmero total de elementos en el Observable, el Observable resultante sera vaco

distinct

El operador distinct se utiliza para emitir solo los valores nicos de un Observable omitiendo los valores que se han emitido previamente.

la forma general del operador distinct es la siguiente:

distinct(keySelector?: (value: T) => K, flushes?: Observable<any>): Observable<T>

El argumento opcional keySelector es una funcin que se utiliza para seleccionar una clave nica para cada elemento. Si no se proporciona una funcin keySelector se utiliza el propio valor como clave.

El argumento opcional flushes es un Observable que se utiliza para limpiar la cach de valores previamente emitidos.

Tomemos este ejemplo:

import { of } from 'rxjs';import { distinct } from 'rxjs/operators';const source = of(1, 2, 3, 1, 2, 4, 5, 3);const example = source.pipe(distinct());example.subscribe(console.log); // salida: 1, 2, 3, 4, 5

En este ejemplo creamos un Observable que emite los valores 1, 2, 3, 1, 2, 4, 5, 3 utilizando of(1, 2, 3, 1, 2, 4, 5, 3) luego, aplicamos el operador distinct que omitir los valores duplicados y emitir solo los valores nicos. La salida del Observable resultante es 1, 2, 3, 4, 5.

Tambin podemos usar la funcin keySelector para seleccionar una clave nica basada en alguna propiedad o caracterstica de los elementos. Por ejemplo, si tenemos un Observable que emite objetos de usuario con una propiedad id, podemos usar la funcin keySelector para emitir solo los objetos de usuario con id nico:

import { of } from 'rxjs';import { distinct } from 'rxjs/operators';const users = [ { id: 1, name: 'Alice }, { id: 2, name: 'Bob }, { id: 1, name: 'Charlie }, { id: 3, name: 'David }, { id: 2, name: 'Eve }]const source = of(users);const example = source.pipe(distinct(user => user.id));example.subscribe(console.log); // salida: { id: 1, name: 'Alice}, { id: 2, name 'Bob' }, { id: 3, name: 'David' }

En el ejemplo creamos un Observable que emite los objetos de usuario definidos en el array users. Luego, aplicamos el operador distinct con una funcin keySelector que selecciona la propiedad id de cada objeto de usuario como clave nica. La salida del Observable resultante es solo los objetos de usuario con id nico: { id: 1, name: 'Alice}, { id: 2, name 'Bob' }, { id: 3, name: 'David' }.

Es importante tener en cuenta que el operador distinct utiliza el cache interna para almacenar los valores emitidos previamente y determinar si un valor es nico o no. Esto puede causar problemas de rendimiento si el Observable emite.
Tambin es importante resaltar que el operador distinct utiliza el operador de equidad de triple igual === para comparar el valor emitido.

distinctUntilChanged

El operador distinctUntilChanged se utiliza para emitir solo los valores que no son iguales al valor anterior emitido por el Observable, es decir, si un valor se ha emitido previamente y es igual al valor actual, el valor actual se omite y no se emite.

La forma general del operador distinctUntilChanged es la siguiente:

distinctUntilChanged(compareFn?: (x: T, y: T) => boolean): MonoTypeOperatorFunction<T>

El argumento opcional compareFn es una funcin que se utiliza para comparar dos valores y determinar si son iguales o no. Si no se proporciona una funcin compareFn, se utiliza el operador === para comparar valores.

Por ejemplo:

import { of } from 'rxjs';import { distinctUntilChanged } from 'rxjs/operators';const source = of(1, 1, 2, 3, 3, 3, 4, 4, 5);const example = source.pipe(distinctUntilChanged());example.subscribe(console.log); // salida: 1, 2, 3, 4, 5

En este ejemplo creamos un Observable que emite los valores 1, 1, 2, 3, 3, 3, 4, 4, 5 utilizando al funcin of de rxjs, luego aplicamos el operador distinctUntilChanged que omitir los valores duplicados y emitir solos los valores que no son iguales al valor anterior emitido. La salida del Observable resultante es 1, 2, 3, 4, 5.

Tambin podemos usar la funcin compareFn para personalizar la comparacin de valores. Por ejemplo si tenemos un Observable que emite objetos de usuario con una propiedad name, podemos usar la funcin compareFn para omitir los objetos de usuario con el mismo nombre:

import { of } from 'rxjs';import { distinctUntilChanged } from 'rxjs/operators';const users = [ { id: 1, name: 'Alice }, { id: 2, name: 'Bob }, { id: 1, name: 'Bob }, { id: 3, name: 'David }, { id: 2, name: 'David }]const source = of(...users);const example = source.pipe(distinctUntilChanged((ant, act) => ant.name === act.name));example.subscribe(console.log); // salida: { id: 1, name: 'Alice}, { id: 2, name 'Bob' }, { id: 3, name: 'David' }

En este ejemplo creamos un Observable que emite los objetos de usuario definidos en el array user, luego, aplicamos el operador distinctUntilChanged con una funcin compare que compara solo los nombres de usuario de dos objetos consecutivos. La salida del Observable resultante es solo los objetos de usuario cuyos nombres son diferentes a los del valor anterior: { id: 1, name: 'Alice}, { id: 2, name 'Bob' }, { id: 3, name: 'David' }

distinctUntilKeyChanged

El operador distinctUntilKeyChanged se utiliza para emitir solo los valores que son diferentes al valor anterior, basndose en una clave especifica de los objetos emitidos. Es similar al operador distinctUntilChanged, pero en lugar de comparar el valor completo emitido, solo compara el valor de una propiedad especfica del objeto.

import { of } from 'rxjs';import { distinctUntilKeyChanged } from 'rxjs/operators';const users = [ { id: 1, name: 'Alice }, { id: 2, name: 'Bob }, { id: 1, name: 'Bob }, { id: 3, name: 'David }, { id: 2, name: 'David }]const source = of(...users);const example = source.pipe(distinctUntilKeyChanged('name');example.subscribe(console.log); // salida: { id: 1, name: 'Alice}, { id: 2, name 'Bob' }, { id: 3, name: 'David' }

Como puedes ver, solo debemos especificar el key a comparar de los objetos emitido, en este caso el key es name y salida ser { id: 1, name: 'Alice}, { id: 2, name 'Bob' }, { id: 3, name: 'David' }