Redux DevTools

La línea

window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()

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 ❤️

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)
);```

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

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());

Redux DevTools en Chrome
https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd/related

Podemos importar y exportar archivos JSON con esta extensión 😮

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__()
);

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.

Genial! Ahora si podre mejorar mi aplicacion con redux devtools

Github Redux Devtools : Installation

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__()