Principios de Redux que todo dev debe saber
Contenido del curso
Introducción a nuestro proyecto
¡Atraparlos ya!
React.js + Redux
Middlewares
Avanzando la ui
Inmutabilidad
Avanzado
Despedida del curso
Principios de Redux que todo dev debe saber
Principios de Redux que todo dev debe saber
Contenido del curso
Diego Fernando Velesaca Orellana
Mauricio Parada G
Miguel Angel Reyes Moreno
Henry J. Perez
Bárbaro Javier Valmaseda Vázquez
Max Andy Diaz Neyra
Fredy Daniel Flores Lemus
Eddy Eder Sucapuca Cruz
Juan Carlos Montilla Sánchez
bryan quispe
Cristobal Nyram
Gabriel Quevedo
Gonzalo Blasco
Juan Diego Mejia Maestre
Harold Zurita Simon
Cristian Contreras
LUIS PALACIOS
David Portocarrero Caicedo
Gualberto Montiel
Cayo Legal
Juan Pablo Jimenez
Juan Camilo Lentino Villalba
REDUX: LibrerÍa nos ayuda a manejar de mejor manera el estado de nuestra aplicación. Para usarlos se necesita:
Consta de tres principios:
Funciones Puras caractesristicas: -Valor de entrada cambia si la entrada cambia.
Eso siempre me sono igual al Context, Supongo que es porque uso el context a lo redux.
Pero es igualito.
Al utilizar cualquier tecnología es importante no solo saber utilizarla, sino porqué la estamos usando y entender la teoría.
¿Qué es Redux? -> Es una librería que nos ayuda a manejar el estado de nuestra aplicación.
Necesitamos 3 cosas:
Redux está basado en 3 principios:
Funciones puras
Entrada: x -> Función Pura: f -> Salida: F(x)
Reducers
Me gusta ver las funciones puras como mecanismos que dan resultados predecibles dados un elemento. Que sin importar cuantas veces metas el mismo datos siempre sera el mismo.
Supongo que por eso se le llama funciones. Porque son resultados que dependen o más bien trabajan en función de sus datos de entrada.
Redux
Is a library to help us manage the state in our app in [[React]]
Redux need:
Redux principle
The state is an object type {key: value}, and the store contain the state and other datas
A pure function have three characteristic
How work a pure function in Reducer
¿Qué es Redux?
¿Qué necesitamos?
Principio de Redux
Una Función Pura, debe cumplir 3 características:
Reducers:
Elementos claves de Redux:
porque no usa typescript si es un curso "profesional"
Hola, Eddy.
Por lo que veo se viene un curso de React con TypeScript y me imagino que gracias a ese curso se dará paso a otros cursos con TypeScript. Aunque no todo el mundo domina TS y no todas las empresas utilizan TS entonces el enfoque del curso es más global a JS o JSX.
Esa es mi opinión a lo que creo.
Saludos.
veo que redux se parece a useContext, me queda la duda saber de cuando usar redux o useContext, la respuesta comun es depende de la complejidad, pero no se si se pueda ser mas especifico en cuanto a performance, implementacion ,etc,etc.
Justo, vengo de un proyecto que ocupe puro useContext, asi que tengo la misma duda.
Me encanta la buena explicación de Mariangélica Useche <3!!!
Intención: APRENDER Clase: Conceptos Claves y Principios de Redux Curso: Curso Profesional de React.js y Redux TIPO: VIDEO (clase 2)
CAPA 1 — MODELO MENTAL
[DEL MATERIAL] — Qué se enseña
La clase presenta qué es Redux y por qué existe, apoyándose en 3 principios fundamentales y en 3 piezas estructurales:
🔹 Los 3 principios de Redux
(state, action) y devuelven un nuevo estado.🔹 Las 3 piezas clave
[CRITERIO SENIOR] — Por qué esto importa
Redux no es una librería de estado, es una arquitectura de control del cambio.
La regla implícita que introduce esta clase es:
“Prefiero ser explícito y predecible antes que rápido y mágico.”
Esto evita errores típicos como:
Si venís de React:
useState → estado localuseReducer → patrónRedux existe cuando la complejidad del flujo, no el tamaño del estado, empieza a doler.
CAPA 2 — APLICACIÓN
[DEL MATERIAL] — Bajada a tierra
El material no propone ejercicio, pero sí deja una forma correcta de pensar:
Ejemplo mental (contador, como sugiere la clase):
{ count: 0 }{ type: 'INCREMENT' }0 → devuelve 1Nada más. Nada oculto.
[CRITERIO SENIOR] — Cuándo usar (y cuándo no)
Usá Redux cuando:
NO lo uses cuando:
La confusión típica:
“Redux y Context son iguales”
No. Context transporta estado. Redux gobierna el cambio del estado.
Cierre obligatorio
Mini-resumen (3 bullets)
Punto ciego típico
Creer que Redux es “para apps grandes”. No: es para problemas de flujo complejos, aunque la app sea chica.
⚛️ Redux: Gestión de Estado Global
Redux es una librería para manejar el estado (los datos) de una aplicación de forma predecible. Es el "cerebro" centralizado que evita que los datos se pierdan o se contradigan en apps grandes.
🌟 Los 3 Pilares de Redux
🧩 Componentes Clave
{ type: 'AGREGAR_CARRITO', producto: 'Laptop' }).💡 Dato Interesante: "Time Travel Debugging"
Debido a que Redux guarda cada cambio como un paso nuevo e inmutable, los desarrolladores pueden usar herramientas para "viajar en el tiempo", retrocediendo y avanzando por los estados de la aplicación para encontrar errores exactamente donde ocurrieron.
🛠️ Ejemplo Rápido
Imagina un contador:
contador: 0{ type: 'INCREMENTAR' }0, le suma 1 y entrega un nuevo estado: contador: 1.Redux – Manejo de Estado Global
Redux es una librería para gestionar el estado de una aplicación de forma predecible y centralizada.
Su objetivo es asegurar que los datos de la app estén siempre actualizados y sincronizados.
Elementos esenciales
Tres principios fundamentales de Redux
Funciones puras
Características:
Ejemplo de cosas que un reducer no debe hacer:
Reducers
(state, action).Los middlewares son funciones en Redux que permiten extender la funcionalidad del store. Se utilizan para interceptar acciones antes de que lleguen al reducer, lo que permite realizar tareas adicionales como registrar acciones, realizar llamadas a APIs o despachar otras acciones. Esto es útil para manejar efectos secundarios en la aplicación de manera más organizada. En comparación con Context API, Redux tiene una forma más estructurada y potente de manejar estos procesos, facilitando una mejor depuración y optimización del rendimiento.
Yo tengo un problema al intentar implementar firebase con redux. Basicamente porque se guarda de manera asincrona el objeto. No sabia que era incompatible. Si lo lograba guardar, pero habia que controlar tanta asincronia, que el codigo era inmantenible.
Patrón Flujo de Datos Unidireccional
Redux implementa el patrón de diseño de software llamado "Flujo de Datos Unidireccional" (Unidirectional Data Flow), el cual consiste en que los datos fluyen en una sola dirección a través de la aplicación, lo que facilita su manejo y depuración. En Redux, los datos fluyen desde el Store a los componentes de la aplicación, y las acciones enviadas desde los componentes al Store disparan cambios en los datos. Esto proporciona una estructura clara y predecible para la gestión del estado de la aplicación.
Almacén: Almacén de estado centralizado que mantiene el estado de toda la aplicación.
Acciones: Una acción es un objeto simple que describe el cambio que se debe realizar en el estado.
Reductores: Una función pura que toma el estado actual y una acción como argumentos y devuelve el siguiente estado.
Despachar: Despachar una acción es la forma de iniciar un cambio de estado.
Suscribirse: Puede suscribirse al almacén para recibir notificaciones de cualquier cambio de estado.
Middleware: Funciones que mejoran el método de despacho con funcionalidad adicional, como registro, acciones asíncronas, etc.
Estado inmutable: El estado debe tratarse como inmutable, lo que significa que no debe modificarse directamente. Para hacer cambios, se debe crear un nuevo estado.
Fuente única de verdad: El almacén es la fuente única de verdad para el estado de la aplicación.
Cambios de estado predecibles: Al seguir los principios de acciones, reductores y una fuente única de verdad, los cambios de estado en Redux son predecibles y fáciles de depurar.
Redux es una librería que nos ayuda a manejar el estado de nuestra aplicación. Su trabajo es asegurar que los datos de nuestra aplicación estén correctamente actualizados.
Qué necesitamos para poder usar Redux?
Redux consta de tres principios:
Pueden existir confusiones sobre el store y el estado. El estado es un objeto, que normalmente es de tipo clave valor o de tipo array. Es una mejor práctica usar la clave valor como estado.
Ahora, el store contiene al estado, como también a los disparadores, los subscribers, etc. Entonces, cabe recalcar que el store solo puede existir en un sitio.
El action type sirve para decirle a redux de qué forma queremos modificar el estado. El action payload nos sirve para decirle a redux con qué datos nuevos queremos actualizar el estado. El payload en algunos action types es opcional ya que algunas veces no necesitaremos de datos nuevos
Las funciones puras tienen tres características: 1- El valor cambia solo si la entrada cambia. 2- Para una misma entrada siempre va a haber una misma salida. 3- No tiene efectos colaterales, solo accede a los datos que nosotros le pasemos, no accede a otras cosas como variables globales o variables de entorno.
Ahora bien podemos decir que los reducers poseen estas características
2.-Conceptos claves de Redux
-- Redux es una libreria que nos ayuda a manejar el estado de nuestra aplicación, es decir, asegura que los datos de nuestra aplicación esten correctamente actualizados.
-- Para aprovecharlo necesitamos de:
-- Redux está basado en tres principios:
-- Funciones puras
-- Reducers
¿Que es Redux? Redux es un patrón y una biblioteca para administrar y actualizar el estado de la aplicación, utilizando eventos llamados "acciones". Sirve como un almacén centralizado para el estado que debe usarse en toda su aplicación, con reglas que garantizan que el estado solo se puede actualizar de manera predecible.
¿Por que debería usar Redux? Redux lo guía hacia la escritura de código que sea predecible y comprobable, lo que lo ayuda a confiar en que su aplicación funcionará como se espera.
¿Qué necesitamos?
Tres principios
Funciones puras
Reducers