¿Qué es y cómo funciona Redux?

Redux es una biblioteca escrita en JavaScript que se utiliza para gestionar el estado de los diferentes componentes de una aplicación. Aunque inicialmente se diseñó para trabajar con React (no en vano se creó a imagen y semejanza de Flux, una librería con la misma finalidad que Redux desarrollada en Facebook, al igual que React), puede utilizarse con cualquier framework o librería de JavaScript.

El objetivo es gestionar ágilmente los estados de los diferentes componentes, y hacerlo de manera centralizada y sencilla.

En una aplicación front-end es un requisito indispensable controlar el estado de todos los componentes que se están ejecutando. Hablar de componentes en una aplicación front-end tiene que ver con todo lo que conforma la interfaz con el usuario, el mostrar (y cómo mostrar) los datos de la aplicación. El hecho de tener que manejar el estado de muchos componentes y, sobre todo, el hecho de que el estado de un componente puede afectar al de otros, hace que sea imprescindible el uso de Redux.

El estado de una aplicación incluye todos los datos que pueden cambiar durante su ejecución, como la información del usuario, los datos cargados desde un servidor (o los que tiene la aplicación stand-alone si es que se inició sin conexión a Internet), las preferencias de la interfaz o el estado de la navegación.

¿Para qué sirve Redux?

Para un desarrollador backend, obtener un estado sería, por ejemplo, averiguar si un usuario está o no registrado, y lo haría con una consulta a la base de datos antes de mostrar la vista o enviar el resultado correspondiente a un cliente. En este sentido, diríamos que se tiene todo el control sobre cómo acceder a esos estados y actualizarlos, dado que hay un contacto directo con la base de datos en este caso.

Para un desarrollador frontend, cuya aplicación tiene que funcionar sin volver a recibir datos del servidor, es crítico controlar todos los estados que influyan en cómo se muestra y qué se muestra en la aplicación. 

Redux proporciona un almacén único (store) donde se guarda el estado completo de una aplicación. Esta filosofía permite que cualquier componente de la aplicación pueda acceder al estado global sin necesidad de tener que supeditar esta acción al estado de otro componente.

¿Cómo funciona Redux?

El funcionamiento de Redux se basa en tres principios fundamentales:

• Disponer de una única fuente de verdad: todo el estado de la aplicación se almacena en un único objeto JavaScript llamado store. Este store es inmutable y solo puede modificarse a través de acciones específicas. Vendría a ser como el rack de interruptores que utilizan los pilotos para dar por hecho que una acción se ha realizado. Basta consultar el estado de un interruptor para que surta los efectos correspondientes en el pilotaje del avión: «Hay combustible suficiente para completar la ruta», por ejemplo.
• El segundo principio establece que el estado es unidireccional (de solo lectura), esto es, que no se trata de cambiar un valor a una variable; en lugar de eso, se envía un objeto con la acción deseada: por ejemplo «AGREGAR_PRODUCTO» y un método llamado dispatch lo procesa.
• El tercer principio indica que los cambios se llevan a cabo mediante funciones puras llamadas reducers. Un reducer es una función que recibe el estado actual y una acción, y devuelve un nuevo estado. Los reducers nunca modifican directamente el estado existente, sino que crean una nueva copia con los cambios aplicados.

Redux es una herramienta poderosa para manejar el estado en aplicaciones web complejas y mantener un control preciso sobre cómo y cuándo cambian los datos. Si quieres profundizar más sobre este tema, no dudes en explorar nuestra titulación de Técnico Superior en Desarrollo de aplicaciones multiplataforma.