Desarrollo Web en Entorno Cliente - Sesión 19 - Curso 25/26 - RXJS. Carrito con Signals y ForkJoin

Angular 20: ¡Signals para el Estado y forkJoin para Peticiones Paralelas! ⚡️

¡Bienvenidos a la decimonovena sesión de nuestro curso! Hoy cerramos con broche de oro nuestro bloque dedicado a la reactividad, completando el viaje por RxJS y haciendo la transición definitiva hacia la gestión de estado moderna con Signals.

En esta sesión, no solo aprenderás a optimizar tus peticiones a la API, sino que verás en una comparativa real por qué las Signals están cambiando las reglas del juego en Angular.

🚀 De RxJS a Signals: El Carrito de la Compra Pro
En la sesión anterior construimos un carrito con BehaviorSubject. Hoy, llevamos esa lógica al siguiente nivel:

Refactorización a Signals: Veremos cómo transformar nuestro servicio de carrito para eliminar la complejidad de las suscripciones manuales.

Estado Reactivo Simplificado: Utilizaremos signal para los productos y computed para calcular automáticamente el total y la cantidad de artículos, logrando un código mucho más limpio y fácil de mantener.

Rendimiento Óptimo: Entenderás cómo las Signals notifican de forma precisa a la interfaz de usuario, mejorando la velocidad de respuesta de nuestra aplicación.

🌀 Dominando forkJoin con la PokeAPI
A veces, una sola petición no es suficiente. ¿Qué pasa cuando necesitas datos de 10 fuentes distintas antes de mostrar nada? Aquí es donde brilla forkJoin.

¿Qué es forkJoin? Es el equivalente a Promise.all en el mundo de los Observables. Nos permite lanzar múltiples peticiones en paralelo y esperar a que todas terminen para recibir los resultados en un único conjunto.

Ejercicio Práctico con PokeAPI: En la PokeAPI, cuando pides una lista de Pokémon, solo recibes sus nombres y URLs. Usaremos forkJoin para:

Obtener la lista inicial.

Lanzar peticiones simultáneas para obtener el detalle (imagen, tipos, estadísticas) de cada Pokémon.

Renderizar la lista completa solo cuando tengamos toda la información disponible.

¿Por qué deberías ver este video?
Comparativa Real: Entenderás cuándo usar RxJS para el flujo de datos asíncronos y cuándo las Signals son mejores para el estado de la UI.

Eficiencia en Red: Aprenderás a evitar las peticiones secuenciales lentas (cascada) usando ejecución en paralelo.

Consolidación de Conocimientos: Aplicaremos todo lo aprendido sobre componentes, servicios y APIs en un proyecto divertido y visual con Pokémon.

¡Es hora de dominar las herramientas que separan a un desarrollador junior de un experto en Angular!

Hashtags: angular20 signals rxjs forkjoin pokeapi pokemon webdevelopment frontend javascript typescript api tutorial programacion reactiveprogramming

Puntos clave del vídeo:
00:00 Introducción y Repaso
03:26 Carrito con Signals
07:48 Interfaces
09:14 CartService
51:19 Navbar
01:02:31 Componente Cart TS
01:09:05 Componente Cart HTML
01:22:27 ForkJoin
01:27:41 Funciones en DataService
01:44:22 Componente ForkJoin