DEV Community

Ariel Calix
Ariel Calix

Posted on • Edited on

Breve Historia de Redux

Redux: Sus Inicios

Redux es un patron orientado a la arquitectura de datos con el que podemos manejar el estado de nuestra aplicacion de una manera sencilla y muy predecible.

Nace en la comunidad de React como una mejora a las ideas desarrolladas por Flux, actualmente es un patron transversal adaptable a todo tipo de libreria o Framework JavaScript (Jsfx). Esto le permite ser ejecutado en el lado de servidor o incluso en aplicaciones para dispositivos móviles.

Redux: Detalles Técnicos

Es una libreria liviana con tan solo un peso total de 2KB y posee una comunidad amplia para soporte, esto ha provocado que compañias como Netflix la adopten con gran exito.

Redux: Sus Beneficios

Los beneficios son muchos, pero intentando resumirlos mencionamos solo algunos:

  • Arquitectura de datos Escalable.
  • Mayor control sobre el flujo de datos y el estado de la aplicacion.
  • El estado es global e inmutable

Estos beneficios tienen un gran impacto para las aplicaciones medianas en las que el set de estados que se utiliza cambia constante debido a diversos componentes.

Podemos mencionar que las necesidades actuales del lado del frontend se facilitan en gran medida al implementar el patron de Redux, simplificando las necesidades de las aplicaciones avanzadas, como la congelaciòn del estado actual de una aplicación y entregarla tal cual se hayaba cuando el usuario vuelve a entrar.

Redux: Patron de Arquitectura de Datos

Existen multiples patrones de arquitectura de datos que han sido adoptados al pasar los años en distintos Frameworks (Fx), entre ellos podríamos mencionar:

  • Model View Controller (MVC)
  • Model View ViewModel (MVVM)

Estos son solo los modelos más famosos, mismos que han sido adoptados por empresas como Microsoft.

Estos patrones muestran cual es el flujo de la información entre los componentes de una aplicación y como transitan los datos de la aplicación entre vistas, modelos, controladores, etc.

Cada uno de estos patrones poseé una característica que los hace diferentes de Redux. Dado que hasta el momento los cambios del estado podian darse desde varios elementos del patron, ya fuera en la vista o en los modelos.

Este tipo de comportamiento produce aplicaciones con mucha interacción entre los componentes, por tanto se dificulta su depuración, mantenimiento e incluso la escalabilidad.

Facebook Inc, ahora META con la intención de simplificar los modelos y hacer más predecible el flujo de los datos en la aplicación, lanzó Flux.

Flux tiene cémo caracteristica más destacable el flujo de los datos ya que éste se realiza siempre en una única dirección.

Diagrama Flux

El diagrama ejemplifica el flujo de datos y nos dice que el Store contiene todos los datos de la aplicación, su estado. También muestra que los datos fluyen hacia la vista en una única dirección y para modificarlos, desde la vista se lanzan acciones, estas una vez tratadas por el Dispatcher son capaces de producir un cambio de Estado en el Store que a su vez viaja hacia la vista.

Ahora bien con Redux el flujo evoluciona un poco pero la esencia de flux se mantiene.

Diagrama Redux

Además de implentar la arquitectura de Flux, en Redux se agregan los Reducers que no son más que funciones puras que se encargan de procesar las acciones y generar un nuevo estado.

Ya hemos conocido la historia de Redux, el patrón que implementa y explicado a grosso modo algunos elementos.

Por ahora esto es lo que hablaremos de Redux. En la siguiente entrega seguiremos hablando sobre Redux y sus principios básicos. Hasta la Próxima.

¡Happy Hacking!

Top comments (0)