Redux DevTools es una herramienta muy útil para monitorear y rastrear cambios en el estado de Redux. También le proporciona opciones para retroceder a un estado previo, guardar y cargar estados, y exportar el registro de la historia.
Para utilizar Redux DevTools, primero debe instalar la extensión en su navegador. Para el propósito de este documento, daremos pasos sobre cómo hacerlo en Google Chrome.
1. Tienes que ir a la tienda de Google Chrome.
2. Busque ‘Redux DevTools’, luego haga click en ‘Agregar a Chrome’.
3. Una vez instalada, la extensión estará disponible en su navegador Google Chrome.
Luego, necesitas parchear el enhancer de Redux DevTools en `createStore`:
```javascript
const store = createStore(
rootReducer,
initialState,
window.REDUX_DEVTOOLS_EXTENSION && window.__REDUX_DEVTOOLS_EXTENSION__()
);
```
Cuando configures tu tienda de Redux de esta manera, tendrás acceso a la funcionalidad de Redux DevTools. Después de eso, abre las herramientas de desarrollador de Chrome, selecciona la tab de Redux e inmediatamente puedes comenzar a rastrear los cambios de estado de Redux.
Puedes rastrear acciones que se disparan, rastrear el “diff” de acciones, examinar el estado antes y después de las acciones e incluso retroceder en el tiempo para revertir a un estado anterior de la aplicación.
También puedes usar Redux DevTools Middleware para deshabilitar la funcionalidad en un entorno de producción y para usar características como acción de despacho desde la herramienta. Para más detalles y funcionalidades, puede consultar la documentación oficial de Redux DevTools.
