Redux_es

Introducción

Redux es un contenedor de estado predecible para aplicaciones Javascript. Ayuda a escribir aplicaciones que se comportan de manera consistente, se ejecutan en distintos entornos (cliente, servidor y nativo) y fáciles de testear. Además de eso, aporta grandes facilidades al desarrollo, como edición en vivo de código combinado con un debugger que permite saltos en el tiempo.

Se puede usar con cualquier librería de vistas, pero se lleva especialmente bien con React y es muy ligero (2kB incluyendo dependencias).

Ideas clave

Redux da una vuelta de tuerca sobre los pilares de Flux, pero evita su complejidad tomando ideas clave de Elm. Sus conceptos fundamentales se podrían enunciar del siguiente modo:

• Todo el estado de la aplicación se guarda en un árbol de objetos dentro de un único almacén (en inglés, "store").
• La única manera de cambiar el estado es emitir una acción, un objeto describiendo qué ha pasado.
• Para especificar cómo las acciones cambian el estado, se escriben funciones reductoras "puras" o reductores (en inglés, "reducers").

Si se compara con Flux, hay una diferencia muy importante y es que Redux ni tiene un Dispatcher ni soporta varios almacenes. Por contra, hay un único almacén con una única función reductora raíz. Al tiempo que la aplicación crece, en vez de ir añadiendo almacenes, lo recomendable es dividir el reductor raíz en reductores más pequeños que operen independientemente unos de otros en distintas partes del estado. Se puede comparar con React en el sentido de que hay un componente padre formado por muchos componentes hijos pequeños.

Esta arquitectura puede parecer demasiado compleja para aplicaciones pequeñas, pero lo bueno de este patrón es su habilidad para escalar y al mismo tiempo permite herramientas de desarrollo muy potentes ya que se puede detectar cada mutación del estado, su causa y sus consecuencias.

Esquema

Toda la arquitectura de Redux gira en torno a un almacén ("store" en inglés) que contiene el estado de la aplicación, el reductor raíz y una serie de métodos de los cuales sólo nos interesa dispatch (despachar en castellano) ya que el resto son para uso avanzado y no han sido necesarios a lo largo del desarrollo. Es precisamente este método dispatch el que recibe una acción (en nuestro caso concreto, una función que devuelve una acción, es lo que se llaman generadores de acciones y es la práctica recomendada por la documentación) y se la pasa al reductor raíz para que la distribuya entre sus hijos y reaccionen en consecuencia, generando un estado nuevo.

Además, se hace una distinción entre componentes "tontos" y "listos". Los componentes "tontos" son aquellos que simplemente generan una vista en función del estado que reciben, sin preocuparse por nada más. Los componentes "listos" son aquellos que tienen acceso al almacén y por tanto pueden acceder al estado y despachar acciones, con lo que suelen actuar como contenedores de componentes "tontos".

Como se ve, esta arquitectura hace que la integración con React sea muy sencilla debido al mecanismo de props (propiedades) que tiene implementado, ya que desde un componente "listo" se pueden pasar a los componentes hijos "tontos" sólo las partes del estado que sean relevantes. Cuando se desea que un componente "tonto" despache una acción como consecuencia de una interacción (como pulsar un botón), la forma de proceder es que el ancestro "listo" más cercano implemente un método que despache esa acción y vaya pasando como propiedad de hijo en hijo ese método.

Mejoras futuras

Si procediera, crear más componentes "listos" (ahora sólo existe uno) para desacoplar un poco el comportamiento de los componentes y reducir su complejidad.