©2024 Escuela Tecnologías de la Información S.L. Todos los derechos reservados.
Materia
Redux
Librería para gestión del estado en aplicaciones Javascript, basada en el patrón Flux
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.
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.
Cómo aprender Redux
El Curso de Redux te permite aprender Redux con Javascript nada más, sin necesidad de usarlo en una librería de componentes. El Curso de Redux y Angular con Ngrx te muestra una implementación particular para Angular. También hemos visto Redux con Web Components en el Curso de aplicaciones progresivas con Web Components y LitElement y en el primer Curso de React que impartimos.
Conocimientos necesarios
Antes de comenzar el estudio de Redux te recomendamos dominar otras materias más básicas, también disponibles en EscuelaIT:
Formación práctica para dominar las posibilidades de Redux en aplicaciones Javascript
Aprende a implementar Redux como arquitectura de datos en Angular para escalar y controlar el estado de las aplicaciones
El curso definitivo para aprender a desarrollar Progressive Web Apps con Web Components y LitElement.
Aprende a desarrollar aplicaciones Javascript con la librería React
Cursos superiores
Los cursos de esta materia te facilitan los conocimientos necesarios para poder abordar los siguientes estudios:
¿Quieres especializarte en Redux?
Accede a todos los cursos de EscuelaIT que te permitirán dominar ésta y muchas otras materias, con tarifa plana.
¿Tienes alguna duda?
¿Todavía no tienes claras las mecánicas y ventajas de EscuelaIT?
¿Tienes alguna necesidad especial que quieras solicitarnos?
¿Podemos ayudarte de alguna otra manera?
No dejes de darle un vistazo a las preguntas frecuentes o FAQ y usa nuestros canales de comunicación para contactar con nosotros. Nuestro equipo de soporte estará encantado de atender cualquier consulta que tengas.