Redux DevTools para depurar tu store
Contenido del curso
Introducción a nuestro proyecto
¡Atraparlos ya!
React.js + Redux
Middlewares
Avanzando la ui
Inmutabilidad
Avanzado
Despedida del curso
Redux DevTools para depurar tu store
Redux DevTools para depurar tu store
Contenido del curso
German Cavani
Gabriel Fernández Moral
Jorge Zerpa
Andres Heredia
Mariangelica Useche
Team Platzi
Cristian Iñiguez
Cristhian Mauricio Yara Pardo
Nicolas Forero Quevedo
Juan Camilo Lentino Villalba
Miguel Angel Reyes Moreno
Juan Pablo Jimenez
Mauricio Parada G
Geovanni Labastida Vázquez
Gualberto Montiel
David Rangel
Juan Diego Mejia Maestre
Harold Zurita Simon
LUIS PALACIOS
Mateo Aponte Murcia
Jose Herrera
La línea
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
Este cambio no aparece en el vídeo y sin esto no funciona. Importante!!!
la extensión incluso te da una herramienta para hacer tests rápidos con jest, mocha... increible!. pdt: el curso esta buenísimo! me esta encantando <3
yo uso otra extension llamada redux-logger, npm i redux-logger y en el index.js agregan
import logger from "redux-logger"; const middlewares = [logger]; const store = createStore( pokemonsReducer, applyMiddleware(...middlewares) );```
¡Qué buen aporte, Andrés! Gracias
Si usando TypeScript les recomiendo usar el paquete @redux-devtools/extension, para que no sufran con el __REDUX_DEVTOOLS_EXTENSION__ does not exist on type window
Así quedaría mi configuración:
import { composeWithDevTools } from '@redux-devtools/extension'; const store = createStore(pokemonsReducer, composeWithDevTools());
Para TypeScript también podrías solucionarlo así:
const store = createStore( pokemonsReducer, (window as any).__REDUX_DEVTOOLS_EXTENSION__ && (window as any).__REDUX_DEVTOOLS_EXTENSION__());
la extension me parece increibe, se puede ver de forma muy ordenada todos los datos de la store, y tambien es personalizable la manera en que se ven los datos
Redux DevTools en Chrome https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd/related
Podemos importar y exportar archivos JSON con esta extensión :o
10.-Redux DevTools
-- Es una extensión de navegador que nos permite ver el estado, las acciones que se estan disparando, su payload y poder viajar en el tiempo para evitar que se hagan ciertas acciones y ver como se comporta nuestra app haciendolo.
Para habilitarlo agreamos la siguiente linea al crear el store:
const store = createStore( pokemonsReducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() );
la forma más actual según la documentación:
en Store.js llamo el middleware creado
import { configureStore } from '@reduxjs/toolkit'; import pokemonReducer from './features/pokemonSlice'; import { logActions } from '../middlewares'; export const store = configureStore({ reducer: { pokemon: pokemonReducer, }, middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(logActions), })
Github Redux Devtools : Installation
Redux DevTools es una herramienta de desarrollo para aplicaciones Redux. Ofrece varias funcionalidades útiles para los desarrolladores, como:
Monitorización en tiempo real del estado de la aplicación: permite ver cómo cambia el estado de la aplicación en función de las acciones dispatches y las transformaciones de los reducers.
Debugging: permite hacer un seguimiento de las acciones y ver cómo cambian los valores del estado.
Reproducción: permite retroceder y avanzar en el tiempo para ver cómo el estado de la aplicación cambió a lo largo del tiempo.
Persistencia: permite guardar y cargar el estado de la aplicación para continuar el desarrollo y debugging después de una recarga de la página.
Integración con la línea de comandos: permite integrarse con otras herramientas de desarrollo y scripts.
Les dejo la configuración con TS para tener redux en el navegador:
const composeEnhancers = (typeof window !== 'undefined' && (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) || compose; export const store = createStore(rootReducer, composeEnhancers());
🛠️ Redux DevTools: El Superpoder del Debugging
Las Redux DevTools son una extensión de navegador indispensable para monitorear, depurar y entender el flujo de datos en aplicaciones que usan Redux.
🌟 Funcionalidades Estrella
payload y qué reducer las procesó.🔧 Configuración Rápida
Para habilitarlo en tu store, debes añadir el soporte para el objeto window del navegador:
import { createStore } from 'redux'; const store = createStore( reducer, // Esta línea conecta tu app con la extensión del navegador window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() );
🛠️ Redux DevTools
Existen herramientas que nos ayudan a depurar y evaluar el estado de nuestra aplicación. En Redux, contamos con Redux DevTools, una extensión para navegador que nos permite analizar cómo se comporta nuestra app en tiempo real.
🔹 Funcionalidades principales
Redux DevTools nos permite:
💻 Instalación y configuración
index.js:const store = createStore( pokemonsReducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() );
✅ Con esto, Redux DevTools quedará habilitado.
📑 Pestañas principales
⏱️ Viaje en el tiempo
Redux DevTools permite viajar en el tiempo usando los botones:
🔑 Esta herramienta es fundamental para depurar, probar y entender el flujo de tu aplicación Redux.
Genial! Ahora si podre mejorar mi aplicacion con redux devtools
Tengo experiencia con las VueDevTools, y me parece un puntazo que las Redux DevTools te permitan hacer Test e incluso ver las diferencias y "skippear" actions desde su interfaz!! Muy versati y comodo de debbugear
Redux DevTools: Es una extensión que nos permite:
Ver el estado.
Ver las acciones que están disparando.
Que payload tiene esas acciones.
Poder interrumpir acciones
Línea que hay que agregar en nuestra store:
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()