No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Observables: Subject

10/36
Recursos

Aportes 8

Preguntas 1

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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 鈥榬xjs鈥.

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))

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