Redux: el patrón de arquitectura de datos

El desarrollo de aplicaciones es cada vez más complejo, el manejo de las multitareas, ser práctico y útil en diversas áreas y necesidades o crear una buena estabilidad que convierta la experiencia de usuario en algo más que necesario.

Son muchos puntos a tener en consideración ¿no es así? Y con el paso del tiempo son cada vez más exigentes, o requieren de un mejor manejo de dicha información y funcionamiento. Es por ello que con Redux todos estos detalles pueden gestionarse de una mejor manera. 

Pero, ¿Cuáles son las posibilidades y limitaciones de esta librería? Pues estos detalles son los que no te dejan dormir. ¡Pero tranquilo! Aquí estamos para explicarte paso a paso en qué consiste, y todo lo que podrás lograr con su uso. 

¿Qué es Redux? 

Para poder entender Redux, es importante ver esta biblioteca de datos como un simplificador de información, que permite el manejo de dichos datos de forma sencilla, incluso cuando se trata de una aplicación compleja. 

Suele ser de gran utilidad con aplicaciones que estén en manos de empresas medianas y grandes. El manejo de la información y los componentes de la aplicación no suele ser una tarea fácil. Pero con Redux, esta complejidad se ve reducida por la que la relación componentes y flujo de datos se mantiene siempre sencilla. 

Entonces ¿qué es exactamente? Es un patrón de arquitectura de datos que busca gestionar estados de aplicación de tal forma que sea predecible en un futuro, y pueda mantener el flujo de datos a raya. 

Esta librería es capaz de adaptarse a otros frameworks o incluso, otras librerías que estén relacionadas al nivel de usuario. 

Sus ámbitos de aplicación son bastante extensos, no importa que se trate de backend o frontend, Redux tiene cabida en ambos niveles y para diversos propósitos. 

Para comprender mejor esto, tenemos que hablar sobre sus características…

Características de Redux

Como ya te hemos mencionado, gracias a Redux se podrán manejar datos muy específicos y que solo afectarán a una página por vez. Expandimos este concepto un poco más dividiendo la información por características fundamentales: 

• Redux permite la gestión de datos que son específicos para una página en concreto. Es decir, si un grupo de datos afecta a toda la aplicación, se consideran como datos globales, mientras que si un conjunto de datos solo afecta una parte de la aplicación, quiere decir que se puede gestionar con Redux. 

• Redux funciona de forma excelente con frameworks y entornos de trabajo tales como React, JQuery y Angular o cualquier página o aplicación cuyo desarrollo esté basado en JavaScript. 

• La gestión de estados es una de sus características principales. Los estados son las «propiedades» de una aplicación en un momento dado. Que se encargarán de brindar una respuesta por parte del servidor al usuario, usando los datos almacenados en caché, o bien, los que se encuentran almacenados de forma local. 

A estas características se les debe sumar su importancia para el mundo de la programación actual. Siendo uno de los formatos de trabajo más demandados en la actualidad junto a React. 

Sin embargo, la razón de su uso se extiende por sus grandes capacidades en la predicción de comportamientos de las aplicaciones cuyo flujo de datos es bastante elevado. 

¿Qué principios definen a Redux?

¡Así es! Parte de la autoridad de Redux se debe a sus principios universales, y que lo convierten en una biblioteca de acción bastante llamativa para los desarrolladores. Sabemos que te mueres por saber, así que toma nota: 

1. Almacenamiento único 

¿Alguna vez te has preguntado cómo es posible que una aplicación universal, pueda saber el estatus real de millones de cuentas de usuario y mostrar lo último que este vio en su perfil o inicio? 

Pues esto se debe gracias a Redux y su capacidad para almacenar el estado de una aplicación bajo un mismo objeto o componente. 

Por otro lado, este principio también resulta clave cuando se trata de solventar problemas relacionados con el funcionamiento de la app. Solucionar bugs, caídas o incluso cuando una app es comprada por otra compañía y esta se debe entregar en un estado concreto. 

¿Reiniciar el desarrollo de la app desde un punto específico? Esto también será posible. Ya te puedes dar una idea del potencial que posee a nivel de almacenamiento y respuesta. 

2. Inmutable 

No importa qué tanto el usuario o un desarrollador pueda interactuar con las funciones de la app, estas se encuentran limitadas a sólo lectura, a menos que un desarrollador experimentado tenga intenciones de realizar acciones de cambio. 

A nivel de usuario, se ve reflejado cuando, por ejemplo, quieres cambiar la contraseña o correo electrónico de una cuenta. Se trata de una información relacionada con el acceso a la cuenta, y cuyo estatus es inmutable hasta el momento en el que el usuario realmente decida realizar el cambio. 

Es decir, no importa qué tanto interactúes con esta opción probando distintos nombres o patrones, lo que realmente determinará el cambio será cuando el usuario seleccione la opción correspondiente. 

Desde el lado del desarrollador, pasa lo mismo. Los cambios de respuesta de los servidores hacia las peticiones de los usuarios siempre estarán limitadas hasta que el desarrollador indique lo contrario. Lo que también depende de muchos otros factores más complejos que tienen que ver con la información de cada usuario, pero eso ya es otro tema. 

3. Funciones puras 

Básicamente, esto significa que los cambios que se realicen en la aplicación, tendrán una respuesta única y coherente (input y output). 

Esto ayuda a simplificar las posibles respuestas de ciertas acciones, peticiones o cambios que se hagan en la aplicación ya sea a nivel de usuario o a nivel de desarrollo. Dicho de otra forma, convierte la aplicación en una función predecible en todo momento, lo que facilita su depuración y actualización a futuro. 

Esto es bien conocido en Redux como reducers, y hace referencia al comportamiento predecible de una app. 

Elementos que conforman a Redux

1. Store 

El store es como por así decirlo, la médula espinal de todas las aplicaciones que son desarrolladas bajo este patrón de comportamiento de datos. 

Así, la store es el punto de comunicación entre las acciones solicitadas y la respuesta lógica a dicha acción (reducers). Y que posterior a ello, se encarga de actualizar el estado de toda la aplicación en función de dichas respuestas lógicas.

En conclusión: 

• Brinda un estatus de la aplicación. 

• De forma predeterminada, el estado de la aplicación se encontrará en sólo lectura. 

• Las acciones son las únicas capaces de actualizar el estado de una aplicación. 

2. Las acciones 

Si deseas que una información sea actualizada en el estado de tu aplicación, sólo será posible mediante las acciones posibles en la app o página. 

Las acciones son propiedades otorgadas por el programador dentro de la aplicación, y estas acciones a su vez, pueden tener algún tipo de información adicional que cumpla ciertas funciones concretas. 

Por ejemplo, imagina lo siguiente: 

Quieres desarrollar una calculadora, si tu calculadora quiere actualizar un estado, se deben añadir acciones. Una acción, por ejemplo, puede ser la posibilidad de sumar o restar. 

Para ello, se le agrega la propiedad de sumar o restar dos o más valores distintos o iguales. Sin embargo, quieres añadir adicionalmente, que sólo sume o reste números enteros. 

De esta manera, la calculadora de tu página, sólo podrá hacer operaciones de suma y resta siempre y cuando se cumpla la función de números enteros. 

Es un ejemplo sencillo, pero que resulta práctico para dar a entender este concepto. 

3. Reducers 

El estado más una acción, tiene como resultado un reducers, también conocido como newstate. 

Básicamente, un reducer se encarga de definir cómo se actualizará la información según qué acción se esté ejecutando. 

Es decir, son las respuestas lógicas de las acciones y que actualizan los estados, incluso cuando no existe ninguna modificación de estado, este siempre debe arrojar un estado que se pueda mostrar al usuario. 

¿Cómo funciona Redux? 

No hay nada mejor que hacer uso de ejemplos prácticos para entender un concepto que puede resultar abstracto. Vamos, que es sólo cuestión de perspectivas para entender información nueva, así que observa con detalle lo siguiente.

El siguiente ejemplo está basado en un comportamiento de solicitud y respuesta sencillo, que muestra de forma clara cómo se actualiza la información de flujo de datos de una aplicación. 

1. El componente (es decir, una función de la aplicación) ha recibido una solicitud de acción. Un evento puede ser algo tan sencillo como un click o una actualización de página para recargar los datos de la página. 

2. Cada acción única es almacenada en el objeto de almacenamiento, conocido como store. Esta store se encarga de guardar el estado único que se ha generado con dicha acción. 

3. La store sirve como un puente de comunicación entre la acción solicitada, el estatus actual de la página o cuenta, y los reducers que son los que se encargan de generar la respuesta evidente ante la solicitud. 

4. Esta nueva actualización de estatus de parte de los reducers hace que la aplicación actualice la base de datos, predeterminada por la acción solicitada. 

5. La store devuelve este último estado al componente, que hará que visualice la solicitud de parte del usuario. 

Cómo te has podido dar cuenta, Redux se limita a actuar bajo estados (estatus) que son actualizados mediante acciones (actions) concretas. 

Pero esto sólo es posible cuando la información necesaria para ejecutar una acción, no requiere de información adicional de otros servidores para poder cargar dicha información y actualizar el estado. 

Aquí es donde entran en juego los famosos frameworks, bibliotecas y demás herramientas que pueden trabajar en simultáneo con Redux. También conocido como side effects. 

¿Y qué son los side effects? 

Por su traducción, efectos colaterales hacen referencia a elementos que se pueden añadir a cierta acción, para que tenga como resultado una petición concreta y que por sí solo, Redux no podría proporcionar. 

Explicado de otra forma, solo imagina que el puntero del ratón interactúa o reacciona si lo pasas por encima de una barra de relleno de información. En este caso, la acción de pasar el puntero crea una respuesta concreta que se va a repetir todas las veces que sean necesarias. 

Ahora bien, los side effects son funciones que pueden interceptar una acción, como puede ser la respuesta del puntero ante opciones de barra de relleno. 

Ahora, cada vez que el puntero se encuentre en una barra de relleno y se haga clic, el sistema solicitará información de otro servidor que permite incluir en la barra de información. 

Por ejemplo, contraseñas, usuarios o correos electrónicos que estén almacenados en caché. Básicamente, cambiaste una respuesta predeterminada, utilizando información de otro servidor que modificó la acción inicial. 

NOTA: Si el ejemplo te ha servido, no olvides mencionarlo en la caja de comentarios, ¡siempre nos encanta poder leerte y saber que somos de ayuda para ti! 

Algunos beneficios clave de Redux 

A modo de conclusión, te brindaremos una pequeña lista donde se definen algunos beneficios que resultan determinantes a la hora de decidir por qué usar esta herramienta de desarrollo. 

• Su arquitectura es escalable: en todo momento puede ser modificada desde un punto concreto, y crear o añadir nuevas funciones específicas que permitan un mayor desenvolvimiento en la aplicación.  

• Control sobre los datos: aplicaciones cuyo manejo de datos es excesivo como pueden ser las redes sociales, se ven beneficiadas gracias al uso de Redux para gestionar los datos en respuestas concretas a solicitudes. Lo que también permite actualizar estados en poco tiempo y de forma global. 

• Popularidad: es una herramienta de desarrollo basado en JavaScript, por lo que si tienes experiencia en ello tendrás muchísimas facilidades, además de contar con una comunidad muy activa. 

¿Alguna vez has usado Redux en el desarrollo de proyecto? Si es así, cuéntanos tu experiencia en los comentarios. 

Recuerda, si por otro lado prefieres compartir, ya estarás no sólo apoyando el trabajo, sino que también estarás ayudando a otros a comprender conceptos y que pueden resultar útiles para la comunidad tech.