Observables: Subject

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

Cursos Empresas Blog Live Conf Eventos Precios

0:0011:28

Observables: Subject

Curso de Programación Reactiva con RxJS

Clase 10 de 36

Clase 10 / 36

Platzi Team

Hace 3 años

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

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

Observables: Subject

Aplicación de Subject en PlatziWordle

Observables: from y of

Observables: interval y time

Finalización del Proyecto PlatziWordle

Transformación con Operadores

Introducción al Proyecto PlatziBoard

La idea de un Operador

Operadores: map, reduce y filter

Aplicación de map en PlatziBoard

Operadores de distinción

Operadores de tiempo

Operadores: mergeAll, mergeMap

Aplicación de mergeAll en PlatziBoard

Operadores: takeUntil

Aplicación de TakeUntil en PlatziBoard.

Operadores: pluck

Operadores: startWith, endWith

Finalización del Proyecto PlatziBoard

PlatziWordle con opción de reinicio

Manejo de errores

Manejo de errores en RxJS

Peticiones HTTP con RxJS

ajax

fromFetch

Recomendaciones y conclusión

Documentación de RxJS

Programación Reactiva con RxJS: Fundamentos y Operadores

Recomendaciones y futuro de RxJS

Bonus

Implementación de PlatziBoard en React

Despedida

Próximos pasos con RxJS

Observables: Subject