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
Resumen
Redux es una librería que ayuda a manejar el estado de una aplicación de forma centralizada y predecible. Si trabajas con JavaScript moderno y necesitas mantener tus datos sincronizados entre componentes, entender los principios de Redux te dará claridad sobre por qué esta herramienta sigue siendo relevante.
¿Qué es Redux y para qué sirve?
Redux se encarga de asegurar que los datos de tu aplicación estén correctamente actualizados en todo momento. Su trabajo suena simple, pero detrás hay una arquitectura muy bien pensada.
Para aprovechar Redux necesitas tres piezas fundamentales:
- Un lugar donde almacenar los datos, conocido como store.
- Un método para acceder a esos datos, como los selectors.
- Una forma de actualizarlos, mediante actions y reducers.
¿Qué es Redux en pocas palabras? Es una librería de manejo de estado que centraliza los datos de tu aplicación en un único store y los actualiza solo a través de acciones controladas.
¿Cuál es la diferencia entre estado y store en Redux?
Aquí muchas personas se confunden, así que vale la pena detenernos. El estado es un objeto, normalmente de tipo clave-valor, con una profundidad que depende del tamaño de tu aplicación. Aunque puedes encontrar estados en forma de arreglo, la convención recomendada es usar objetos clave-valor.
El store, en cambio, contiene al estado pero también otras propiedades como los disparadores y los subscribers. Es decir, el estado vive dentro del store, no son lo mismo.
¿Cuáles son los 3 principios de Redux?
Redux se sostiene sobre tres principios que guían cómo escribes y organizas tu código. Vamos uno por uno.
¿Por qué debe haber una única fuente de verdad?
El primer principio dice que el estado global de tu aplicación debe estar en un solo lugar: el store. Tener una única fuente de verdad evita inconsistencias y hace mucho más fácil rastrear cómo cambian los datos a lo largo del tiempo.
¿Por qué el estado es de solo lectura?
El segundo principio establece que no puedes modificar el estado directamente. La única forma de actualizarlo es despachando un action, que es un objeto que describe qué fue lo que pasó.
¿Y por qué importa tanto esta regla? Por dos razones concretas:
- Redux centraliza los cambios y los aplica en orden, evitando un race condition en el medio.
- Tienes un registro claro de qué cambios ocurrieron, lo que permite volver atrás en el tiempo fácilmente, algo muy útil para depurar.
¿Qué es un action en Redux? Es un objeto que describe qué cambio ocurrió en la aplicación. No modifica el estado por sí mismo, solo lo describe para que el reducer haga el trabajo.
¿Por qué los cambios se hacen con funciones puras?
El tercer principio indica que los cambios al estado deben realizarse a través de funciones puras, conocidas como reducers. Cada reducer recibe el estado actual y el action que describe el cambio, y devuelve un nuevo estado.
¿Qué es una función pura y cómo se aplica a los reducers?
No todas las personas tienen fresca esta definición, y entenderla bien te ayudará después con el concepto de inmutabilidad.
Una función pura tiene tres características:
- El valor de salida cambia solo si la entrada cambia.
- Para una misma entrada siempre devuelve la misma salida, es decir, es predecible.
- No tiene efectos colaterales: solo accede a los valores que le pasas, sin depender de variables globales o de entorno.
¿Por qué los reducers deben ser funciones puras? Porque así garantizan que el estado se calcule de forma predecible, sin sorpresas ni dependencias externas que rompan la trazabilidad de los cambios.
¿Cómo escribir reducers correctamente?
Llevando estas reglas a la práctica, tus reducers deben cumplir tres condiciones:
- Calcular el nuevo estado basándose únicamente en sus parámetros: el estado actual y el action.
- No modificar el estado directamente; en su lugar, aplicar el concepto de inmutabilidad creando una nueva referencia.
- No incluir lógica asíncrona, valores aleatorios ni consultas a variables externas que puedan causar efectos colaterales.
Con estos principios claros, ya tienes la base teórica para entender por qué Redux funciona como funciona. ¿Te quedó alguna duda sobre la diferencia entre estado, store, actions y reducers? Cuéntame en los comentarios qué parte te gustaría profundizar.