¿Se acuerdan de lo de Redux?... Que por no guardar una cosa en el estado... toda esa mierda?

Este lunes por fin me decidí a reorganizar los cientos de miles de recursos que he ido acumulando desde que empecé en el desarrollo front end y tenía inconvenientemente repartidos por todas partes: elementos guardados de Twitter, marcadores de Chrome, distintas páginas en Notion, mensajes a mí misma en Whatsapp, mensajes a mí misma en Slack e incluso en algún email a mí misma.

A mitad de esa misma mañana ya había dejado la organización para el martes y empezado un tutorial de Youtube que me había encontrado en alguno de mis "trasteros digitales". No me avergüenzo de mi decisión, creo que cualquiera al que le vengan por primera vez con que si "estados globales", que si "concurrencia", que si "eliminación de la asincronía de JS" y demás bondades de Redux hubiera hecho lo mismo que yo.

Redux es una librería de gestión de estado para aplicaciones JavaScript, que no suena tan impresionante como luego resulta ser, de verdad lo digo.

Los tres personajes principales aquí son: el "store" (el almacén, donde guardamos los estados de forma global), las "actions" (debe haber una acción para cada uno de los eventos que ocurren en la página, cada action tiene un identificador único que nos permite "dispararlas" de forma independiente y controlada), y los "reducers" (funciones puras que definen el resultado de cada una de las acciones en nuestro estado).

Yo he acabado asimilando cómo funciona comparándolo con un montacargas de comida de un hotel (el pasado siempre vuelve):

De esta forma, en mi cabeza el "store" es la cocina, los "reducers" son los montacargas y las "actions" serían el botón que llama al montacargas. Es decir, en Redux utilizaremos una action para disparar los reducers que estén afectados por esa action, y que nos ayudarán a hacer la gestión de estado en el store.

Desde que he empezado a aprender Redux he debido de leer unas 50 veces que no se debe utilizar para proyectos pequeños, ya que el uso de Redux complica el código y hay en ocasiones que no nos va a resultar rentable, pero claro, ¡Yo quería probarlo! Así que he hecho un pequeño cronómetro muy sencillo (pero muy matón) en el que toda la funcionalidad trabaja usando Redux:

Aunque dejaré abajo el repositorio del proyecto, porque compartir es vivir, no tiene mucho sentido que me ponga a contar cómo lo hice (seamos honestos, llevo literalmente cuatro días usando Redux y habrá partes como para llevarse las manos a la cabeza). Sin embargo sí que me ha parecido interesante dejar por aquí ciertos puntos que podrían resultarte de mucha utilidad si has decidido empezar con Redux y no te puedes permitir perder la cabeza en el intento como llevo haciendo yo cinco días:

• Redux está basado en el paradigma de programación funcional, que a mí por lo menos me pillaba muy lejana de mi adorada "orientada a objetos", por lo que tuve que dar un rodeo bastante amplio antes de entrar en materia para contextualizarme un poco.
• En mi proyecto lo utilicé con React JS, pero se puede utilizar Redux con cualquier framework JS, incluso con JS vanilla.
• En caso de utilizarlo con React JS, el routing se tiene que hacer diferente a como estamos habituados. Para usarlo en Redux deberemos recurrir a Connected React Router, en su repositorio de GitHub dejan información detallada sobre la instalación y configuración: repositorio GitHub
• Si has desarrollado usando estados, ten muy presente el cómo harías cada cosa en la librería o framework que conoces, ya que todo va a funcionar muy parecido. Yo me pasé dos días buscando una solución para la función de restart y no di con ella hasta que pensé en cómo lo haría con ReactJS únicamente.
• Entre los fundamentos de Redux se encuentra la inmutabilidad, es decir, cuando creamos un objeto no podremos mutarlo, tendremos que hacer una copia y mutar esa copia. Por este motivo, te va a resultar de muchísima utilidad entender y practicar el spread antes de ponerte manos a la obra (esto ayudará a que el código no sea tan verboso y quede todo más limpio y legible, por no decir que mola mucho y te quedas con toda la peña usándolo).

Recursos mencionados/utilizados:

• Proyecto cronómetro: https://github.com/martreyz/redux-sports-watch
• Tutorial Mosh Hamedani (Twitter: @moshhamedani): Dura hora y media y en la introducción habla también de la programación funcional, ultra completo! Vídeo Mosh Hamedani
• Tutorial Dev Ed (Twitter: @deved94) : Dura media hora, yo lo vi después del de Mosh Hamedani y me vino muy bien para aclarar ciertas dudas ver una construcción más sencilla, además personalmente este chico me cae estupendamente y me río mucho con sus vídeos) Vídeo DevEd
• Connected React Router: https://github.com/supasate/connected-react-router