Cuando desarrollamos aplicaciones del lado cliente (ya sea aplicaciones moviles o aplicaciones web) complejas, lo que hacemos es dividir una interfaz grande en pequeñas partes llamadas componentes.
Cada componente puede tener un estado, que no es mas que datos que posee una interfaz en un momento dado, estos componentes a su vez pueden estar compuestos de otros componentes formando lo que se conoce como un árbol de componentes (UI Componentes Tree)
Pero surge una dificultad, y es que si tengo un componente que debe pasar datos a componentes hijos, y estos a su vez deben pasar esos datos a sus componentes hijos; o necesito que multiples componentes accedan al mismo estado, se torna complicado el poder entender el código, mantenerlo y hacer Testing.
Es decir tener descentralizado el estado (cada componente con su estado) por toda la aplicación es dificil de manejar. Así que es aquí donde entran las bibliotecas de manejo de Estado (State Management Library)
Estas bibliotecas nos permiten mantener un estado en un solo lugar, por aparte de todo nuestro arbol de componentes.
es decir permiten tener un estado centralizado, De esta forma no importa en que componente estemos desarrollando, siempre va a ver un solo lugar de donde podemos acceder al estado, lo que nos evita en estar pensado en la jerarquia de los componentes
Entre estas bibliotecas de manejo de estado podemos encontrar a XState, MobX, Recoil, Zustand, Rematch, Y una lista enorme de otras bibliotecas
Incluso hay algunas que estan dedicadas a un Framework especifico
Pero una de las mas populares es Redux
Redux es una biblioteca pero a su vez tambien es un Patron, que permite administrar el estado de una aplicacion.
¿Qué es Redux?
Para aprender Redux, primero necesitamos entender 3 conceptos:
- Store
- Actions
- Reducers
Pero para entenderlo mejor, pensemos en una aplicacion,
esta aplicacion necesita tener un solo lugar donde va estar almacenado el estado de toda la aplicacion, la que usaran todos los componentes
asi que lo que nos dice Redux es que creemos un Store
el cual es un objeto de Javacript, inmutable, que almacena todo tu estado
piensalo como una base de datos pero para tu aplicacion cliente (mobile web)
Este es el estado centralizado que te mencione
Cuando en nuestra interfaz se ejecuta un evento,
como podria ser un evento click, submit, change, u otros (click, etc) lo que vamos a querer es actualizar este estado, para que la interfaz muestre un nuevo valor
Pero no lo vamos a hacer directamente, sino necesitamos primero especificar algo llamado Actions
Un ACTION es solo objeto de Javascript que contiene informacion y le dice a Redux que operacion se va a ejecutar sobre el store, es decir si quiere actualizar, añadir u obtener datos
Un action luce de esta manera, tiene una propiedad type, que es el nombre de la accion a ejecutar y puede tener un payload que es el dato que queremos darle al store para que lo tome y actualice el estado.
El reducer lo que hara es que basado en el action qu ele pasemos, ejecutara una porcion de codigo que modificara el estado y retornara un nuevo objeto que seria el nuevo estado de toda la aplicacion
Entonces cuando el codigo de frotnend recibe un nuevo valor, simplemente actualiza la Interfaz (UI)
Pero si recuerdas dije que el estado es inmutable, lo que significa que no lo alteraremos sino que para que podamos actualizar el estado
Un nuevo objeto debe ser creado, y este nuevo objeto es el que nuestra aplicacion leera
Esto nos permite que podamos tener el estado anterior y el nuevo estado
Creando una especie de historial que podemos navegar de adelante hacia atras o vicevirse (Time Travel)
Y es que Redux tambien tiene una extension de navegador al igual que React que es muy util para debugear nuestros reducers y el estado de Redux
Ahora debido a que la biblioteca core de redux
puede ser complicado de manejar,
existe Redux toolkit que facilita la instalacion y el uso de Redux, asi que esta es la forma recomendada actual por el propio proyecto
Redux fue creado por Dan Abramov y Andrew Clark in 2015 (_) inspirado en una arquitectura que usa Facebook llamada Flux y en un lenguaje funcional llamado ELM, de hecho todos estos temas de inmutabilidad, funciones puras, y estilos declarativos son comunes en programacion funcional, y son usados por Redux internamente.
Esta biblioteca es bastante usada en muchos proyectos a gran escala actualmente, y por lo general esta relacionada a React aunque puedes usarla con otros framweorks como Angular, Vue, Svelte, e incluso en Vanilla Javascript (Javascript Puro)
Ahora estos actions solo son descripciones de lo que queremos hacer, pero no saben como hacerlo
De hecho como son objetos y estos no se pueden ejecutar, tenemos que usar una funcion llamad dispatch que ejecuta estos actions.
Piensa a los como ordenes escritas en codigo para el store, es decir son ordenes pero no definen como hacer esas ordenes.
Asi que neceistamos otras piesas de codigo que si tengan es logica, y que actualicen el estado
estos son los Reducers
Un Reducer solo es una funcion que esperan 2 parametros
- el estado actual (para poder saber que datos tiene la interfaz hasta ese momento)
- y el action (para saber que debe ejecutar, y que datos usar si este trae un payload)
Por supuesto esto es una simplifcacion asi que una vez tienes esta idea recomiendo ir a la documentacion, donde todo esto esta mas a detalle (https://redux.js.org/tutorials/essentials/part-1-overview-concepts) y como se que puede ser algo aburrido, he creado dos tutoriales usando React Redux Toolkit, en el que podras usarlo con React y Nodejs y React. Los dejo en la descripcion
Asi que ahroa que sabes que es Redux, ya solo te falta empezar a isntalarlo y practicarlo, y eso es por supuesto es la parte mas complicada
