Observables: Subject

Clase 10 de 36 • Curso de Programación Reactiva con RxJS

Contenido del curso

Fundamentos de programación reactiva

Introducción a la librería RxJS

Generación de Observables

Transformación con Operadores

Manejo de errores

29
Manejo de errores en RxJS
07:44 min

Peticiones HTTP con RxJS

Recomendaciones y conclusión

Bonus

35
Implementación de PlatziBoard en React
02:03 min

Despedida

36
Próximos pasos con RxJS
01:07 min

Tomar examen

Comentarios

Daniel Meza

student•

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é Gregorio López Arias

student•

Para estos lo mejor es usar estados. con NgRx https://ngrx.io/guide/store

Daniel Meza

student•

José, sí buenísimo. Pero a veces es demasiada infraestructura NgRx como para lo que necesitas.

Marcelo Arias

teacher•

🔃 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.

Víctor Andrés Córdova Poma

student•

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

Felipe de Jesús Ramirez Rodriguez

student•

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

Platzi Team

student•

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

Cristian Navarro

student•

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?

Marcelo Arias

teacher•

¡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.

Kelvin Ortiz

student•

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

Joel Osvaldo Santos Soto

student•

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.

Diego Fernando Caviedes Camaho

student•

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

Tanelo Mondaca Silva

student•

Espectacular! muy claro

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

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

/**
 * 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));

Observables: Subject

Fundamentos de programación reactiva

¿Por qué deberías aprender programación reactiva con RxJS?

La teoría de la programación reactiva

Introducción a la librería RxJS

Extensiones Reactivas

La idea de la reactividad

Diagrama de canicas

Generación de Observables

Creación de un Observable

Introducción al Proyecto PlatziWordle

Observables: fromEvent

Aplicación de fromEvent en PlatziWordle