Conceptos claves de Redux

¿Qué es Redux?

Es una libreria que nos ayuda a manejar el estado de nuestra aplicación. Esto quiere decir, que se encarga de mantener actualizado los datos basandose en tres elementos importates, los cuales son:

1. Store: En donde se almacena la información.
2. Selectores: Metodos que nos permiten acceder al store.
3. Disparadores, actions o reducers: Que nos permiten actualizar el store.

Principios de Redux

1. Debe existir una única fuente de verdad (store) ⇒ El estado global de la aplicación debe estar en un sólo lugar y este es el store.

   Es importante tener en cuenta que un store no es lo mismo que un state, ya que, el state es un objeto de tipo clave-valor y tendrá una profundidad considerable dependiendo de la aplicación, y por otro lado, tenemos al store que es quien contiene al state pero además tambien agrupa a los disparadores, suscriber, etc.

2. El estado es de solo lectura (actions) ⇒ No se puede modificar directamente, esto debe ocurrir a través de los actions. Esto nos va a permitir que Redux ejecute los cambios en orden y de forma centralizada evitando así que ocurran raise conditions, además, nos permitirá llevar un historico de los cambios que ocurran y poder cambiar de estados de forma rápida si así se requiere.

3. Los cambios deben realizarse a través de funciones puras (reducers) ⇒ Los reducers se encargaran de calcular el nuevo estado basandonse en el estado y la acción que le proporcionemos, además, el estado no debe modificarse directamente ya que debemos respetar la inmutabilidad y por último, no podemos incluir lógica asincrona (obtención de valores aleatorios que puedan causar efectos colaterales)

   <aside> 💡 Las funciones puras son aquellas en donde el valor que retorna cambia si la entrada cambia, esto quiere decir, que para una misma entrada siempre tendremos la misma salida (es predecible).

   </aside>

Ciclo de vida de Redux

Explicación del flujo

1. El estado es quien define la condición actual de nuestra aplicación y vive dentro del store
2. La vista se renderiza basada en el estado que se tiene
3. Cuando se dispara un evento, el estado es actualizado dependiendo de lo ocurrido. Esta actualización ocurre mediante un disparador que lo envía al reducer.
4. El reducer es el encargado y quien sabe como se va a actualizar el estado.
5. Al ocurrir el cambio, la vista se re-renderiza basandose en el nuevo estado.

Diferencias entre Redux y Context

“Cuando un sistema es opaco y no determinista, es dífícil reproducir errores o agregar nuevas características.” ~Redux Docs

En React el paso de datos entre padres e hijos se realiza a través de las props. Probablemente para un componente padre que tiene un solo nivel de hijos este paso de datos se realice de forma sencilla, pero, ¿Qué pasa si aumentan los niveles de profundidad y necesito pasarle datos a un hijo en el nivel muy profundo? 🤔 Debemos pasar los props entre componentes hijos para que pueda llegar a su destino provocando que existan componentes con props que probablemente no necesitan.

Este problema se le conoce como prop drilling y ocasiona que el estado se vuelva mucho mas díficil de mantener.

Debido a este problema entonces nace Redux ya que facilita el manejo del estado y hace que éste sea mas predecible y traceable. Sin embargo, como otra alternativa para solucionar este problema tenemos Context API de React pero antes de hablar de sus diferencias echemos un vistazo general a este concepto.

Context API

Es una herramienta que nos permite pasar datos de componentes padre a hijos sin tener que pasar por todos los componentes hijos ubicados en los distintos niveles. Fue diseñado para compartir los datos que son considerados “Globales”.

Podemos usar esta herramienta para el uso de datos que no cambian constantemente a lo largo de nuestra aplicación: Modo (Oscuro o Claro), Usuario autenticado o Idioma (Inglés o Español).

Disponible a partir de la versión 16.3 de React