Desarrollo De Frontend (Clase) - REDUX DESDE CERO: Estado Global y Flujo de Datos en React (parte 13) 🔥

Estos vídeos no están hechos con propósitos de enseñar, solo los subo para mantener un recuerdo de la Universidad, y para eventos futuros (errores, ¿Cómo diseñé esto?, ¿Qué error cometí?), lo digo porque no me fijo en la musica de fondo ni esos detalles mínimos ... Hola buenas, esta es la clase de "Desarrollo de Frontend" del día Viernes 04 de Abril del 2025 (semestre 2025-1) de la Universidad de Caldas. En esta clase como tal completamos la sección de *login* con *React*, agregando la carga de usuario y manejando el *Login* y *Logout*. ¡Bienvenidos a la decimotercera sesión de nuestro curso de *Desarrollo Frontend*! En esta clase magistral, entramos de lleno en el ecosistema de *Redux*, la librería estándar para gestionar el estado global en aplicaciones de React profesionales. Aprenderás el ciclo de vida de los datos en Redux: desde la creación de un *Store* centralizado hasta la definición de *Actions* y la implementación de *Reducers* puros. Exploramos cómo conectar nuestros componentes mediante Hooks modernos como useSelector y useDispatch, permitiendo que cualquier parte de la interfaz acceda o modifique la información sin complicaciones. Además, vemos cómo integrar Redux con la arquitectura que hemos construido para mantener un código limpio y altamente mantenible. 🚀 *LO QUE APRENDERÁS EN ESTA SESIÓN:* • Arquitectura de Redux: Entiende el flujo unidireccional de la información. • Configuración del Store: Creación del punto único de verdad para tus datos. • Actions y Action Creators: Cómo disparar cambios en el estado de forma clara. • Reducers: Creación de funciones para actualizar el estado sin mutarlo. • Hooks de React-Redux: Uso eficiente de useSelector para leer y useDispatch para escribir. • Depuración Profesional: Introducción a las Redux DevTools para rastrear cambios. 📌 *CAPÍTULOS DEL VIDEO:* 00:00 Introducción: ¿Por qué necesitamos Redux y el estado global? 05:16 El problema del Prop Drilling y cómo Redux lo soluciona 12:31 Conceptos fundamentales: Store, Actions y Reducers 25:41 Instalación de dependencias y configuración inicial del Store 40:21 Creación de nuestro primer Slice: Lógica de usuario o productos 55:11 Conectando componentes con useSelector para leer datos 1:10:36 Despachando acciones con useDispatch desde la UI 1:25:51 Integración de Redux con el sistema de Login anterior 1:40:16 Uso de Redux DevTools para monitorear el flujo de datos 1:50:21 Resumen de la arquitectura y conclusiones de la clase 🔗 *GUÍA DE LA PLAYLIST: DESARROLLO FRONTEND* • Video Anterior: https://www.youtube.com/watch?v=HlgtJuoNszg • Video Siguiente: https://www.youtube.com/watch?v=c5VmWpm5kJY 📺 *VIDEOS RECOMENDADOS DE INGE. SRM* • INTRODUCCIÓN BASES DE DATOS (Clase 1): https://www.youtube.com/watch?v=pkyMrzjc2no • REVISIÓN BASES DE DATOS (Clase 5): https://www.youtube.com/watch?v=eOJX0cQVNeg #Frontend #ReactJS #Redux #StateManagement #JavaScript #DesarrolloWeb #Programacion #IngeSRM #WebDevelopment #Coding #ReduxToolkit TAGS IGNORAR: react, introducción a react, curso de react, tutorial de react, react desde cero, aprender react, react js, fundamentos de react, componentes en react, estado en react, props en react, hooks en react, useState, useEffect, jsx, virtual dom, desarrollo frontend, curso de desarrollo web, programación en javascript, biblioteca de javascript, spa, aplicaciones de una sola página, react router, gestión de estado, redux, contexto en react, ciclo de vida de componentes, renderizado condicional, eventos en react, formularios en react, manejo de eventos, desarrollo de interfaces, arquitectura de componentes, patrones de diseño en react, mejores prácticas en react, optimización de rendimiento, react para principiantes, guía de react, react avanzado, integración con apis, consumo de apis rest, fetch en react, axios en react, despliegue de aplicaciones react, herramientas para desarrollo en react, entorno de desarrollo, create react app, vite, next.js, frameworks de javascript, comparación entre react y otros frameworks, ventajas de usar react, comunidad de react, recursos para aprender react, documentación oficial de react