Redux tutorial (Parte 1)
En español (Introducción)
Introducción
Cada día es más común el uso de librerías como React Js y frameworks basados en el concepto de FLUX (Reflux, Flummox, FB Flux, etc … ).
En esta serie de tutoriales, intentaremos comprender cómo funciona Redux, como poder sacarle todo su potencial junto a React y entender porqué es tan popular.
El tutorial completo está basado en las diferentes guías que hay sobre el tema. Sólo las he adaptado, comprimido y traducido para que se entienda todo fácil y rápidamente.
Es necesario señalar que sería ideal que tuvieras una experiencia previa usando React, estuvieras familiarizado con es6 (la nueva versión de javascript) y webpack (tool para bundles) para comprender mejor los ejemplos del tutorial.
Siéntete libre de comentar, o corregir, cualquier parte de él. Sólo espero que os sea de utilidad, que compartáis el artículo si os gusta y que disfrutéis desarrollando con este nuevo paradigma tan diferente del MVC.
¿Qué es Redux y porqué utilizarlo?
En su site oficial, se define como: predictable state container for JavaScript apps. Lo cual se podría traducir como contenedor de estados predecibles para aplicaciones javascript.
Para que entendamos de que se trata, más bien digamos que es una librería basada en el concepto de Flux, la cual nos facilitará la labor de conectar fuentes de diferentes entornos (apis, sockets, etc …), de forma sencilla, y fácil de testear.
Para esta serie de tutoriales usaremos Redux junto con React, pero puedes utilizar redux con cualquier librería de view performance como RiotJs.
Los 3 principios de Redux:
Redux basa su funcionamiento en 3 principios clave:
- Una sola fuente de datos: El estado de la aplicación se almacena en un árbol de objetos dentro de una única STORE. Esto hace que sea más fácil depurar una aplicación y sea más rápido su desarrollo.
- El estado es sólo de lectura: La única manera que tenemos de cambiar el estado será mediante ACTIONS. Así nos aseguramos que la vista nunca modifica el estado, sino que expresa su intención de mutar.
- Las mutaciones se escriben como funciones puras: Para especificar como cambiará el estado por las acciones, se utilizan los REDUCERS, que son funciones puras a las que pasamos el estado anterior y la acción a realizar devolviendo un nuevo estado de la aplicación, en lugar de modificar el estado anterior.
No te asustes si no comprendes bien estos 3 principios. Iremos poco a poco, implantándolos y explicándolos en el tutorial con ejemplos que quedarán más que claros.
Fin de la introducción
Hasta aquí la primera parte en la que he querido empezar suavemente, sin códigos y con algunos conceptos. En el siguiente capítulo empezaremos a ver los actions y definiremos algunos conceptos más, necesarios para empezar a trabajar con Redux.
