Apuntes sobre React: Redux

Creo que Redux es una gran herramienta de desarrollo junto con react y es una de las mejores librerias que implementan la arquitectura flux, sin embargo, algo que muchos devs llegan a concluir es que la curva de apredizaje de Redux es muy alta, y que teniendo malas practicas te puede llevar a un store-hell del cuál es complicado salir.

Acá les quiero compartir la información que creo relevante saber para poder suavizar esta curva de aprendizaje, ya que me parece que a veces hace falta el conocimiento sobre conceptos.

Para entender redux primero debes entender Flux. Flux es una arquitectura de datos que describe el flujo en que los datos debe recorrer para hacer una actualización de la vista.

En la imagen de arriba se describe este flujo. Una acción dispara un evento que provoca una actualización en el store de la aplicación, al modificarse el store la vista se actualiza con los nuevos valores. La acción disparadora puede provenir de cualquier lugar, de un servicio o de la misma vista, repitiendo el ciclo de actualización de datos.

Podríamos explicar mucho más el comportamiento de flux, pero con esto basta para pasar a redux.

Redux se puede implementar sin necesidad de usar react, ya que es una librería que solo resuelve la arquitectura de flux. Por lo que primero veamos como es una implementación de Redux sin react.

Cuando creamos el store estamos generando una instancia de un objeto que solo será modificada por sus propios métodos, no hay getters ni setters, la única forma de modificar el store es disparando las acciones mediante la función dispatch del store que creamos previamente.

Algo a notar es que las acciones son objetos planos de javascript que contienen una propiedad type que ayuda al reducer a diferenciar el tipo de acción y poder modificar el store según el caso. La propiedad type es casi un estándar pero bien podrían ser cualquier otra propiedad que sea un identificador de la acción. A las acciones se les puede agregar mas propiedades para que los reducers cambien el store según las propiedades adicionales que reciban.

En este último ejemplo vemos como nos auxiliamos de la propiedad payload para modificar el store según el valor que nos manda la acción.

Para implementar redux con react existe otra librería bastante útil. react-redux nos provee de un componente Provider y de un HOC connect para poder compartir el store a través de nuestra aplicación de react. Es importante saber que son librerías por separado, redux nos provee las funciones para crear el store, mientras que react-redux nos provee un medio para integrar el store generado con nuestra aplicación de react.

Bastante sencillo cierto?

Acá les dejo el ejemplo puesto en marcha.

Resumen

Redux es una librería que no esta casada con React, bien podrías implementar redux con vue o con angular. En react resuelve un problema muy molesto para muchos programadores y es el props-drill, ya que al tener un store al cuál te puedes conectar a cualquier nivel que esté tu componente, es bastante útil. Sin embargo no es la mejor forma de usarlo, ya que puedes llenar tu estado con basura que no usarás todo el tiempo, pero ya en otra entrega hablaremos un poco más sobre usos de redux en una aplicación real.

Siempre es bueno saber la lógica detrás de los frameworks o las librerías, saber que problemas resuelven, pues de esta forma sabremos si la librería o framework que usamos, se acomoda al problema con el que estamos enfrentando. Muchas veces no es necesario usar redux, pero otras te puede ayudar demasiado.