Si trabajas con Redux y aún no usas Redux DevTools, te estás perdiendo la forma más rápida de inspeccionar el estado, ver qué acciones se disparan y hasta viajar en el tiempo dentro de tu aplicación. Esta extensión de navegador es una aliada clave para desarrolladores y desarrolladoras que quieren depurar con precisión sin imprimir un solo console.log.

¿Qué es Redux DevTools y para qué sirve?

Redux DevTools es una extensión que se instala en el navegador y conecta directamente con el store de tu aplicación. Te permite observar el flujo de datos en vivo: qué acciones se ejecutan, qué payload llevan y cómo va cambiando el estado en cada paso [00:13].

¿Qué hace Redux DevTools? Te muestra el estado actual de tu app, las acciones disparadas con su payload, las diferencias entre estados y te deja saltar o reproducir acciones en orden.

Entre sus funciones más útiles están:

• Ver el estado completo en formato toggleable o raw.
• Inspeccionar la última acción disparada y su payload.
• Comparar diferencias entre estados con la pestaña diff.
• Hacer skip de acciones para ver cómo se comporta tu app sin ellas.
• Viajar en el tiempo y reproducir paso a paso cada dispatch.

¿Cómo instalar Redux DevTools en tu navegador?

La extensión está disponible para Chrome, Edge y Firefox [00:42]. En el repositorio oficial vas a encontrar la documentación con los pasos según el navegador que uses. Una vez instalada, verás un ícono que confirma que ya quedó activa.

Pero ojo: tener la extensión no basta. Si abres tu proyecto, probablemente aparezca deshabilitada. Para activarla necesitas conectarla con el store de Redux desde tu código.

¿Cómo habilitar Redux DevTools en el store?

En la documentación oficial encontrarás la línea exacta que debes agregar al crear el store. El procedimiento es directo [01:18]:

1. Copia la línea sugerida en la documentación.
2. Ve a tu archivo index.js, donde tienes el método createStore.
3. Pasa esa línea como segundo argumento al createStore, junto al reducer.
4. Guarda y refresca tu proyecto en el navegador.

Ese segundo argumento se conoce como enhancer: una función que extiende la funcionalidad de tu store sin modificar la lógica del reducer. Más adelante verás cómo los enhancers y middlewares amplían lo que Redux puede hacer.

¿Cómo usar Redux DevTools para depurar tu aplicación?

Una vez habilitada, abre la extensión desde el ícono o desde el inspector del navegador, en la pestaña Redux. Ahí vas a encontrar varias secciones que te dan visibilidad total del flujo de datos [02:05].

¿Qué información muestra cada tab de Redux DevTools?

El panel principal organiza la información en pestañas pensadas para depurar rápido:

• State: muestra el estado actual de tu aplicación. Por ejemplo, la lista de pokemons cargada en memoria.
• Action: indica cuál fue la última acción ejecutada y qué payload llevaba.
• Diff: compara el estado antes y después de la acción. Si no hubo cambios, no verás diferencias; si sí, las resalta.

En el caso de un primer setPokemons, el diff mostrará todos los datos nuevos porque el estado pasó de vacío a poblado [02:35].

¿Qué es el time travel en Redux? Es la capacidad de saltar entre acciones pasadas y ver cómo se veía el estado en ese momento, como si rebobinaras tu aplicación.

¿Cómo viajar en el tiempo y hacer skip de acciones?

Una de las funciones más potentes es poder omitir acciones específicas para ver qué pasaría sin ellas. Si haces skip sobre el primer setPokemons, tu estado vuelve a quedar vacío, justo como antes de que se ejecutara el fetch [03:05].

También hay una barra de play que te lleva al primer montaje de tu aplicación y reproduce, en orden, cada dispatch que se hizo. Esto es ideal cuando quieres entender por qué tu estado terminó en cierto valor o detectar una acción que llegó cuando no debía.

¿Cuándo conviene usar el skip de acciones? Cuando sospechas que una acción está alterando mal el estado y quieres confirmarlo sin tocar el código.

Con Redux DevTools instalado y conectado, depurar deja de ser adivinanza. Puedes confirmar que tus disparadores realmente actualicen el estado como esperas, detectar payloads incorrectos y entender el orden exacto en que se ejecutan tus acciones.

Explora las configuraciones que ofrece la extensión, prueba sus opciones avanzadas y comparte en la sección de recursos los descubrimientos que hagas. ¿Qué función te resultó más útil al depurar tu app?