Qué son las DevTools de Redux y cómo utilizarlas

Utilizada generalmente con Angular y React, Redux es una biblioteca JavaScript de código abierto que funciona para administrar y centralizar el estado de una aplicación. Cuando se combina con Angular y React, se hace con la intención de construir interfaces de usuario, similar a la arquitectura Flux de Facebook.

Una de sus funciones más conocidas son los Devtools, los que proporcionan una plataforma de depuración para las aplicaciones desarrolladas con la ayuda de Redux.

Características de los Devtools de Redux

• Permite inspeccionar cada carga util de estado y de acción
• Puedes "cancelar" acciones retrocediendo en el tiempo
• Si se llega a cambiar el código del reductor, cada acción se evaluará de nuevo "por etapas"
• Si los reductores lanzan entonces se podrá identificar el error y la acción en la que sucedió
• Con el potenciador de la tienda persistState (), puede conservar las sesiones de depuración en las recargas de la página.

Famliariazados ya con las características principales de las Devtools en Redux, veamos cómo se puede omitir acciones y retroceder en el tiempo con la ayuda de esta herramienta. 

Tomemos en cuenta que hay dos variantes de desarrollo Redux: Redux DevTools y Eztensión Redux DevTools.

Uso de las DevTools de Redux

Lo primero es instalar la extensión en tu navegador, una muy importante para conectar tu navegador a Redux, sin ella no podrás cargar las herramientas desde tu computadora.

Para conectar esta nueva herramienta se pueden seguir varias opciones, pero esta es la favorita de los expertos en Redux:

1. npm install --save redux-devtools-extension

2. import { composeWithDevTools } from ‘redux-devtools-extension’ (este código va dentro del archivo de la tienda.

3. Finaliza componiendo tu tienda con el módulo importado:

import { composeWithDevTools } from 'redux-devtools-extension';

const store = createStore(reducer, composeWithDevTools(
  applyMiddleware(...middleware),
  // other store enhancers if any
));

Así se agregan las características personalizadas:

import { composeWithDevTools } from 'redux-devtools-extension';

const composeEnhancers = composeWithDevTools({
  // Specify custom devTools options
});
const store = createStore(reducer, /* preloadedState, */ composeEnhancers(
  applyMiddleware(...middleware),
  // other store enhancers if any
));

Si no tienes potenciadores o middleware en su aplicación, existe un enfoque más sencillo:

import { devToolsEnhancer } from 'redux-devtools-extension';

const store = createStore(reducer, /* preloadedState, */ devToolsEnhancer(
  // Specify custom devTools options
));

De esta manera puedes comenzar a utilizar las DevTools de Redux, tal como lo hacen nuestros developers en Rootstack cuando crean las aplicaciones necesarias para dar solución a los problemas tecnológicos de nuestros clientes.

Te recomendamos en video