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.
José, sí buenísimo. Pero a veces es demasiada infraestructura NgRx como para lo que necesitas.
🔃 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$ =newObservable<number>(subscriber=>{ subscriber.next(Math.round(Math.random()*100));})const numbersRandom$ =newSubject<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)
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$ =newObservable((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$ =newSubject();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().
Se crea un Subject llamado numbersRandom$, que actuará como un canal para recibir y emitir los números aleatorios.
const numbersRandom$ =newSubject()
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
Se suscriben los observadores observador1 y observador2 al SubjectnumbersRandom$ utilizando el método subscribe(). Esto permite que los observadores reciban los valores emitidos por el Subject.
A continuación, se suscribe el Observablenumber$ al SubjectnumbersRandom$ 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 SubjectnumbersRandom$. Este número aleatorio se emitirá a todos los observadores suscritos al Subject, incluyendo observador1 y observador2.
Porque en este caso se debe suscribir antes de enviar un evento, y en los ejemplos anteriores se podia generar el evento y despues suscribir?
¡Hola Cristian! En el caso de los Subjects, necesitas suscribirte antes de enviar un evento porque si no estás suscrito en el momento en que el Subject emite un valor, te perderás ese valor. Sin embargo, en los ejemplos anteriores con Observables, sí se podía generar el evento y luego suscribirse, ya que cada suscriptor recibe su propia secuencia de datos desde el principio cuando se suscribe.
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
