Una sinfonía en C#: Observables en Javascript RXjs ¿Qué es un Subject?

En este cuarto y último post sobre Observables en Javascript vamos a ver el último tema que, según mi opinión, forma parte de los conceptos más básicos para comprender los observables. Vamos a hablar de Subjects. Si no has leídos los posts anteriores dejo la lista:

• Qué son los observables
• Operadores
• MergeMap y SwitchMap

¿Qué es un Subject?

En pocas palabras, es un objeto que permite crear un observable para controlarlo manualmente, por ejemplo.

// Creamos un subject que emitirá _strings_letsubject=newSubject<string>();// nos suscribimossubject.subscribe({next:(value)=>{console.log(value);}});// invocamos manualmente el método next y emitimos un valorsubject.next('Hola');

En el ejemplo de arriba vemos el funcionamiento más básico de Subject, crear un observable que podemos controlar, luego nos suscribimos y el resultado es el esperado, emite un valor cuando invocamos manualmente el método next.

Hola

Crear nuestros propios observables y controlarlos

Entonces, podríamos tranquilamente hacer algo así:

letsubject=newSubject<number>();subject.subscribe({next:(value)=>console.log(value),complete:()=>console.log('complete'),error:(value)=>console.log('Error '+value)});leti=0;letcounter=0;letinterval=setInterval(()=>{i++;if(i===10){counter++;i=0;subject.next(counter);}},200);document.querySelector("#stopButton")?.addEventListener("click",()=>{subject.complete();clearInterval(interval);});document.querySelector("#errorButton")?.addEventListener("click",()=>{subject.error("Mi Error custom");});

Y vemos que el resultado es el esperado, hasta que presionamos Stop y se ejecuta el complete

1234complete

Si en lugar de Stop forzamos un error el Subject deja de emitir también.

1234567ErrorMiErrorcustom

Controlar otros observables

El último ejemplo que es el más interesante es que, ya que los operadores son observables (o funciones que retornan observables) podemos utilizar un Subject para controlar otros Observables, por ejemplo.

letonStop=newSubject<void>();// creamos un observable del evento click de un botón// agregamos un operador TakeUntil para que deje de recibir eventos cuando onStop finalice.constobserver={next:(item:any)=>console.log(` X:${item.clientX} Y:${item.clientY}`),complete:()=>console.log("complete"),error:()=>console.log("error")};letonStop=newSubject<boolean>();fromEvent(document,"click").pipe(takeUntil(onStop)).subscribe(observer);document.querySelector("#stopButton")?.addEventListener("click",()=>{onStop.next(true);});

En el ejemplo de arriba simplemente controlamos el takeUntil gracias a nuestro Subject, cuando se next es true. La idea de hacerlo así es que un evento proveniente de otro lugar puede detener a un evento diferente. O que si lo hacemos manualmente (por ejemplo el usuario hace click) podemos detener un flujo de ejemplos o varios, recordemos que un Subject al igual que cualquier Observable controla múltiples suscripciones.

Nada más por hoy, nos leemos.