Observables: Subject

Mi día a día es trabajar con Angular. Y dentro de angular la comunicación entre componentes suele volverse compleja cuando tienes todo separado y necesitas estar comunicando información entre componentes que están en la misma jerarquía, donde uno no es hijo del otro y viceversa.

Aquí es donde RxJS me es útil, creando un servicio para utilizar como estado. Con Observables de tipo Subject. Donde almacenan info y quienes se subscriban a él pueden obtener el último valor emitido y los siguientes.

🔃 Un Subject es un tipo de Observable que nos permite enviar los mismos valores de una fuente a todos los observadores además también nos permite insertar valores desde afuera del observable.

📁 Puedes ver el código de esta clase en el repositorio.

Este es el codigo del profe. Pero con el tipado de Ts.

import { Observable, Subject } from "rxjs";

const numbers$ = new Observable<number>(subscriber => {
	subscriber.next(Math.round(Math.random()*100));
})

const numbersRandom$ = new Subject<number>();

const observador1 = {
	next: (value: number) => {
		console.log("the value is: ", value);
	}
}

const observador2 = {
	next: (value: number) => {
		console.log("the value is2: ", value);
	}
}

numbersRandom$.subscribe(observador1);
numbersRandom$.subscribe(observador2);

numbers$.subscribe(numbersRandom$)
numbersRandom$.next(Math.round(Math.random()*100));

Observables: Subject

• Podemos unir las partes observadoras por medio de su caracteristica multicast
• además de observable, se puede conectar a un observador
• pude funcionar como un pipe (tuberia multicast)

What is a Subject? An RxJS Subject is a special type of Observable that allows values to be multicasted to many Observers. While plain Observables are unicast (each subscribed Observer owns an independent execution of the Observable), Subjects are multicast.

Every Subject is an Observable. Given a Subject, you can subscribe to it, providing an Observer, which will start receiving values normally. From the perspective of the Observer, it cannot tell whether the Observable execution is coming from a plain unicast Observable or a Subject.

Every Subject is an Observer. It is an object with the methods next(v), error(e), and complete(). To feed a new value to the Subject, just call next(theValue), and it will be multicasted to the Observers registered to listen to the Subject.

Sin Subject

De esta forma se ejecuta el código de forma diferente (2 ejecuciones distintas)

import { Observable } from "rxjs";

const observableAlfa$ = new Observable(suscriber => {
  suscriber.next(Math.random());
})

const observador = {
  next: (value) => {
    console.log('observador', value);
  }
}

const observador2 = {
  next: (value) => {
    console.log('observador2', value);
  }
}
observableAlfa$.subscribe(observador);
observableAlfa$.subscribe(observador2);

Con Subject

De esta forma se ejecuta el código de forma unica (1 ejecución y envia el mismo valos a los observadores)

/**
 * Observables: Subject
 * https://rxjs.dev/guide/subject
 */
import { Observable, Subject } from "rxjs";

const numbers$ = new Observable((subscriber) => {
  // Podemos enviar una función (como Math.random) que generará el mismo dato en observador1 y observador2.
  subscriber.next(Math.round(Math.random() * 100));
  subscriber.next(Math.round(Math.random() * 100));

});

const numbersRandom$ = new Subject();

const observador1 = {
  next: (number) => {
    console.log('observador1 ' + number);
  },
};

const observador2 = {
  next: (number) => {
    console.log('observador2 ' + number);
  },
};

numbersRandom$.subscribe(observador1);
numbersRandom$.subscribe(observador2);

numbers$.subscribe(numbersRandom$);
// También podemos enviar valores fuera del observable Subject.
numbersRandom$.next(45);
numbersRandom$.next(Math.round(Math.random() * 100));

Observable Subject

El Subject en RxJS es una clase que actúa como un emisor y receptor de valores simultáneamente.

<aside>
<img src=“https://static.platzi.com/media/achievements/piezas-programacion-reactiva-rxjs_badge-92561658-fc14-4ef2-9372-13fc9ae9f8f3.png” alt=“https://static.platzi.com/media/achievements/piezas-programacion-reactiva-rxjs_badge-92561658-fc14-4ef2-9372-13fc9ae9f8f3.png” width=“40px” /> Puedes enviar valores a un Subject llamando al método next(value), y cualquier Observer suscrito a ese Subject recibirá los valores emitidos.

</aside>

Estas son algunas características importantes del Subject:

• Emisor y receptor: El Subject puede actuar como un emisor y receptor al mismo tiempo. Puedes enviar valores a través de next(value) y suscribirte a él para recibir esos valores.
• Multicast: Un Subject puede tener múltiples Observers suscritos a él. Cada Observer recibirá los valores emitidos por el Subject. Esto permite la transmisión de datos a varios consumidores de manera eficiente.
• Historial: A diferencia de otros tipos de Subject, el Subject básico no mantiene un historial de los valores emitidos anteriormente. Cuando te suscribes a un Subject, solo recibirás los valores emitidos después de la suscripción.
• Compleción y error: Un Subject también puede completarse o emitir un error llamando a los métodos complete() o error(error). Después de completarse o emitir un error, el Subject no emitirá más valores.

Vamos al Codigo:

Primero, se importan las clases Observable y Subject desde el módulo ‘rxjs’.

import { Observable, Subject } from 'rxjs'

Se crea un Observable llamado number$ que genera un número aleatorio entre 0 y 100 utilizando el método Math.random(). El número generado se emite utilizando next().

const number$ = new Observable(suscribe => {
  suscribe.next(Math.round(Math.random() * 100))
})

Se crea un Subject llamado numbersRandom$, que actuará como un canal para recibir y emitir los números aleatorios.

const numbersRandom$ = new Subject()

Se definen dos objetos observador1 y observador2, que contienen la función next(). Estos objetos serán utilizados como observadores para suscribirse al Subject y recibir los números aleatorios emitidos

const observador1 = {
  next: (value) => {
    console.log(value)
  }
}

const observador2 = {
  next: (value) => {
    console.log(value)
  }
}

Se suscriben los observadores observador1 y observador2 al Subject numbersRandom$ utilizando el método subscribe(). Esto permite que los observadores reciban los valores emitidos por el Subject.

numbersRandom$.subscribe(observador1)
numbersRandom$.subscribe(observador2)

A continuación, se suscribe el Observable number$ al Subject numbersRandom$ utilizando el método subscribe(). Esto significa que cada vez que el Observable emita un número aleatorio, se enviará al Subject.

number$.subscribe(numbersRandom$)

Finalmente, se genera un número aleatorio adicional llamando a next() en el Subject numbersRandom$. Este número aleatorio se emitirá a todos los observadores suscritos al Subject, incluyendo observador1 y observador2.

numbersRandom$.next(Math.round(Math.random() * 100))

Deberían hacer un curso de NgRx que es la arquitectura redux para angular usando rxjs. seria bueno un curso de esa librería

En la biblioteca RxJS, un Observable Subject es un tipo de objeto que funciona como un Observable y un Observer al mismo tiempo. Esto significa que puede recibir y emitir eventos, y cualquier suscriptor a ese objeto recibirá los eventos que se emiten.

Esto se llama hot observable y cold observable
Cold Observable: son unicast, emite valores solo cuando se suscribe.
Hot Observable: multicast (comparten valores entre multiples suscriptores), emite siempre

https://www.google.com/search?q=hot+observable+and+cold+observable&oq=hot+observable+and+&aqs=chrome.0.0i19i512j69i57j0i19i22i30i625l2j0i10i19i22i30i625j0i19i22i30i625l3j0i19i22i30j0i19i22i30i625.6262j0j7&sourceid=chrome&ie=UTF-8#fpstate=ive&vld=cid:25591e2e,vid:oKqcL-iMITY

Espectacular! muy claro