Recibo este error en mi index.tsx.
La propiedad ' REDUX_DEVTOOLS_EXTENSION_COMPOSE ' no existe en el tipo 'Ventana'.
Aquí está mi código index.tsx:
import * as React from 'react'; import * as ReactDOM from 'react-dom'; import App from './App'; import './index.css'; import registerServiceWorker from './registerServiceWorker'; import { Provider } from 'react-redux'; import { createStore, compose, applyMiddleware } from 'redux'; import rootReducer from './store/reducers'; import thunk from 'redux-thunk'; const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; const store = createStore(rootReducer, composeEnhancers( applyMiddleware(thunk) )); ReactDOM.render( <Provider store={store}><App /></Provider>, document.getElementById('root')); registerServiceWorker();Instalé @types/npm install --save-dev redux-devtools-extension y estoy usando create-react-app-typescript. Muchas gracias por cualquier consejo sobre lo que está pasando de antemano.
Este es un caso especial de esta pregunta . Redux no proporciona tipos para __REDUX_DEVTOOLS_EXTENSION_COMPOSE__ porque Redux DevTools expone esta función, no 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 lo hace el paquete redux-devtools-extension que contiene tipos de TypeScript. Si está instalado, se deben usar sus importaciones en lugar de acceder a __REDUX_DEVTOOLS_EXTENSION_COMPOSE__ manualmente.
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 aquellos nuevos en redux y estas herramientas de desarrollo fue confuso y poco claro. 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 la redux-devtools-extension en su forma mínima.
Mi enfoque del problema fue el siguiente:
export const composeEnhancers = (window && (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) || compose;