Redux

Redux es una librería para la gestión del estado en aplicaciones Javascript, que básicamente nos permite mantener un contenedor de estado único, que es capaz de distribuirse a través de todo el árbol de componentes de la aplicación y avisar de los cambios producidos en él.

Qué es el estado

El estado de la aplicación es el conjunto de datos que maneja, que cambia a medida que el usuario interacciona o se modifican las fuentes de los datos en general. El estado es algo muy general que se usa en todas las aplicaciones. Ejemplos de estado serían: un dato que nos permite saber si una interfaz de búsqueda está abierta, si un usuario se encuentra logueado o no, qué datos tiene el usuario en concreto si es que está iniciada la sesión, qué registros se han recuperado de la base de datos, la pantalla de la aplicación en la que nos encontramos, etc.

La gestión del estado se puede hacer de muchas maneras, pero lo más básico en las aplicaciones es que los datos que forman el estado se encuentran dispersos entre los componentes. Por ejemplo el componente de routing sabrá en qué pantalla nos encontramos, o el componente de login sabrá si se ha iniciado la sesión y qué usuario es el que la inició. Dentro de este esquema inicial, por medio de enlace de datos (lo que se conoce como binding), el estado se transfiere a todos los componentes que lo necesitan. Por ejemplo el componente de login ofrecerá los datos del usuario logueado a todos los componentes que necesiten conocerlo para realizar sus labores.

Por qué nos interesa contar con una gestión del estado ágil y clara

Sin embargo, la gestión del estado de esta manera básica tiene varios problemas. El primero es que nos obliga a disponer de una herramienta que nos permita ese enlace de datos, para trabajar de una manera ágil. En el caso que usemos alguna librería de enlace de datos, cosa normal hoy en día, tendremos que bindear datos por toda la aplicación, con lo que nuestras vistas estarán repitiendo por todas partes la sintaxis que nos permite enviar un dato. Por ejemplo, en el caso del usuario, es normal que decenas de componentes necesiten conocerlo, por lo que me veo obligado enviar ese dato cantidad de veces por todo el árbol de la aplicación, lo que es muy repetitivo.

Pero ese no es el problema más importante! la peor situación se produce cuando varios componentes necesitan cambiar el estado de la aplicación, incluso cuando varios componentes son capaces de cambiarlo en esquemas de aplicaciones con doble binding. En estos casos lo que ocurre es que el trasiego de la información por la aplicación se vuelve complejo. Tenemos que transferir los datos del estado por todo el árbol de la aplicación hasta que llega al componente que lo puede cambiar, o bien si tenemos doble binging lo cambiamos en cualquier componente y se vuelve un lío saber cuándo cambió el estado, quién inició el cambio y bajo qué circunstancias ha ocurrido.

Patrón Flux

Para solucionar los inconvenientes de una gestión del estado enmarañada, como la que hemos descrito en el punto anterior de las aplicaciones básicas, Facebook presentó el patrón de arquitectura de datos Flux. Es un patrón unidireccional, que básicamente incluye un contenedor de estado global y un flujo desde este contenedor hacia todos los componentes que necesiten conocer el estado.

Cuando un componente requiere modificar el estado simplemente avisa al contenedor general por medio de una acción. La acción se procesa por medio un un reducer, que es el único responsable de cambiar el estado.

Eso es  el patrón Flux, en líneas generales y de manera resumida, cuya implementación la encontramos en Redux.

Librería Redux 

La librería Redux permite el uso del patrón definido por Flux para la gestión del estado de una manera sencilla y ordenada. 

Podemos usar Redux en cualquier tipo de aplicación, puesto que no es algo que sea de uno u otro framework, sino que es una librería independiente, realizada en Javascript, que podemos usar como complemento a cualquier otra librería o framework que tengamos. 

Usar Redux puede ser un poco complejo al principio, puesto que requiere una manera nueva de trabajar para la gestión del estado, a la que generalmente estamos poco acostumbrados. A medida que lo vamos usando se pueden apreciar las ventajas y los problemas que conseguimos solucionar de una manera sencilla y elegante, permitiendo además que la aplicación crezca de manera ordenada. 

Cómo aprender Redux En EscuelaIT puedes aprender Redux de una manera bastante sencilla y en cualquier tipo de librería, ya que lo tenemos explicado primero con Javascript y luego en la aplicación a otras librerías del stack de frontend.