Redux sin tanto dolor

Antes de entrar en materia te dejo el LINK de paypal para que puedas donar lo que creas conveniente, así me ayudas a seguir creando posts de mejor calidad y más específicos en cada tema. Gracias!

Voy a explicarles paso por paso para qué es Redux y como funciona.

React.js es una libreria que se crea en base a componentes, es decir, a pequeños trozos de código que representan partes de nuestra UI, esas partes se dividen en dos:

1. Stateless components o componentes sin estado: Son componentes que no tienen procesos lógicos del modelo de negocio y al escribirlos no extienden de Component.
2. Componentes con estado: Son aquellos que si extienden de Component y contienen procesos lógicos del modelo de negocio.

Teniendo esto en cuenta, debemos pensar en el comportamiento de nuestra aplicación. Es decir, si yo consumo datos de alguna API y queremos renderizar y el resultado de esa renderización afecta otros componentes ¿cómo hacemos para que esos componentes afectados sepan qué proceso ejecutar en base a qué evento?

Bueno, primero existen a nivel general dos caminos.

1. Sin store, es decir, solo React.js: Aquí debemos buscar que cada actualización del “estado” el componente padre se enteré de este cambio para pasarle a través de los props el cambio de estado a todos los hijos y que estos sepán el momento del cambio de “estados”. El problema es que a nivel de arquitectura es muy complicado escribir esto, ya que debemos usar componentes que incluso no se van a usar en ese evento para pasar los props a todos los hijos. Es decir, es un problema para escalar y mantener.

2. Con Store: Aquí no es necesario pasarle todos los props a todos los hijos, solo le pasamos la actualización del estado a través de acciones a un “proceso en paralelo” que distribuye los props a los componentes hijos que lo necesitan. Existen varias librerias que ejecutan este proceso, unas mas entendibles que otras por la forma en como trabajan: Redux, Mobx, Flux, Reflux y otros.

En este caso explicaré Redux (Mobx es una excelente opción que luego explicaré). Como pueden ver en la siguiente imagen Redux funciona de forma centralizada y distribuye el estado de la aplicación a través de los props hacia los componentes hijos.

Ya teniendo en cuenta la forma lógica generalizada de por qué usar una Store, ahora explicaremos Redux y su funcionamiento:

Redux contiene tres partes desacopladas y funcionan bajo los siguientes pasos:

1. Tipo de acciones: Indica que tipo de acción o evento que se va ejecutar.
2. Acciones: Importa los tipos de acciones y devuelve un objeto por la acción ejecutada.
3. Reducers: Son funciones que reciben dos parámetros: El estado anterior y los datos (El estado anterior es el objeto que devuelve la acción) y devuelve el nuevo estado. Los Reducers son FUNCIONES PURAS, es decir, solo va recibir el estado anterior y los datos para devolver el nuevo estado, no va a tomar datos de otros componentes, ni llamar a APIS ni nada de eso.
4. Store: Toma todos los reducers de la aplicación (los nuevos estados) y los convierte en props para que cualquier componente hijo que lo necesite acceda a dichos estados.

Básicamente, todos los eventos o acciones que vas hacer en React y que creas que va afectar al menos un componente adicional, debe pasar por Redux.

Ya con esta teoria que debes repasar una y varias veces porque es complejo y más para aquellos developers que venimos de hacer MVC tenemos un poco más claro como debemos trabajar en React.

Puedes seguir el PRÓXIMO POST donde explico la integración de React con Redux.

Saludos.