Saltar al contenido

Error con la extensión Redux DevTools usando TS: “La propiedad ‘__REDUX_DEVTOOLS_EXTENSION_COMPOSE__’ no existe en el tipo ‘Ventana'”.

No olvides que en las ciencias informáticas cualquier problema casi siempre tiene diferentes soluciones, de igual modo enseñaremos lo más óptimo y eficiente.

Solución:

Este es un caso especial de esta pregunta. Redux no proporciona tipos para __REDUX_DEVTOOLS_EXTENSION_COMPOSE__ porque esta función está expuesta por Redux DevTools, no por Redux en sí.

es:

const composeEnhancers = window['__REDUX_DEVTOOLS_EXTENSION_COMPOSE__'] as typeof compose || compose;

O:

declare global 
    interface Window 
      __REDUX_DEVTOOLS_EXTENSION_COMPOSE__?: typeof compose;
    


const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

Esto ya está hecho por redux-devtools-extension paquete que contiene tipos de TypeScript. Si está instalado, se deben usar sus importaciones en lugar de acceder __REDUX_DEVTOOLS_EXTENSION_COMPOSE__ a mano.

Mi enfoque del problema fue el siguiente:

export const composeEnhancers =
  (window && (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) || compose;

La forma más simplificada de hacer que esto funcione con TypeScript es usar la extensión redux-devtools e instalarla como una dependencia de desarrollo de la siguiente manera:

npm install --save-dev redux-devtools-extension

El siguiente paso para los nuevos en redux y estas herramientas para desarrolladores eran confusas y poco claras. Todos los documentos tienen un código como el siguiente:

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

El problema es que no tengo ningún middleware configurado, así que esto no funcionaba. En su uso más primitivo, esto es todo lo que necesita:

import  composeWithDevTools  from 'redux-devtools-extension';

const store = createStore(myReducer, composeWithDevTools());

En este punto, si hace clic en la extensión en el navegador y hay una tienda redux válida, podrá inspeccionar el estado.

Este es un enfoque alternativo al uso (window as any) y también aclara exactamente cómo usar el redux-devtools-extension en su forma mínima.

Recuerda comunicar esta división si te fue útil.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *