0

Ao configurar Redux DevTools obtenho o seguinte erro do TypeScript:

Property 'REDUX_DEVTOOLS_EXTENSION_COMPOSE' does not exist on type 'Window & typeof globalThis'.

store.ts

import { applyMiddleware, createStore, Store } from 'redux';
import createSagaMiddleware from 'redux-saga';
import { DevsState } from './ducks/devs/types';
import rootReducer from './ducks/rootReducer';
import rootSaga from './ducks/rootSaga';


export interface ApplicationState {
  devs: DevsState
}
const composeEnhancers =
  typeof window === 'object' &&
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
      // Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...
    }) : compose;

const sagaMiddleware = createSagaMiddleware();

const enhancer = composeEnhancers(
  applyMiddleware(sagaMiddleware),
);

const store: Store<ApplicationState> = createStore(rootReducer, enhancer);


sagaMiddleware.run(rootSaga);

export default store;
1
  • Ao invés de window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ tente window['__REDUX_DEVTOOLS_EXTENSION_COMPOSE__']. Suspeito de uma situação (que ocorre no pré-parse do ts)
    – Syzoth
    Commented 24/01/2020 às 18:53

3 Respostas 3

1

Este erro, como eu comentei, é um problema do compilador/transpilador (chame como desejar) que é executado "fora" do navegador, a todo momento que o transpilador do TypeScript nota uma atualização em seus sources ele vai gerar novamente os scripts .js, nisto o objeto window não existe, pois o processo não ocorre no navegador, então como o objeto não existe vai emitir o erro:

does not exist on type 'Window & typeof globalThis

O transpilador de TypeScript não necessariamente é obrigado a entender que você vai executar seus scripts em um navegador ou em outro ambiente, porque a linguagem não tem foco de ambiente.

Sabendo disto o window vai ser processado para buscar o REDUX_DEVTOOLS_EXTENSION_COMPOSE no tempo desta transpilação, e como o objeto não existia até então, ele processa com um "possível" erro e para deste ponto.

A solução é fazer o seguinte cast: window as any, isto em TypeScript está forçando um cast da variável para any, e any pode ser "qualquer coisa", então assim o "transpilador" não vai esperar um objeto do tipo Window (usado em navegadores) ou do tipo thisGlobal (usado em Nodejs), como o cast disse que pode ser qualquer coisa então ele "compila" normalmente e no momento de executar o código no navegador ele vai funcionar normalmente.

Você pode fazer (como na sua própria resposta):

const composeEnhancers =
   typeof window === 'object' &&
   (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
   (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
}) : compose;

Ou então pode simplesmente reaproveitar em uma variável, algo como:

let win: any = window as any;

const composeEnhancers =
   typeof window === 'object' &&
   win.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
   win.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
}) : compose;

E assim poderia até reaproveitar a variável win em mais lugares de seu script, evitando os repetidos casts

Vale notar que isto ocorre em outros ambientes, como Angular e Ionic, mas isto é porque eles também usam TypeScript e o problema tem a mesma origem.

1

Minha solucao para o problema foi :

  const composeEnhancers =
  typeof window === 'object' &&
  (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
  (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
  }) : compose;
4
  • 2
    E poderia explicar o porque ela resolve e o porque este problema ocorre? Para que a pergunta e resposta sejam úteis para futuros visitantes
    – Syzoth
    Commented 29/01/2020 às 16:52
  • coloca ai mano para eu atualizar Commented 29/01/2020 às 17:01
  • 1
    Coloco como resposta, ok? A não ser que você saiba o motivo da necessidade disto e já queira editar a sua.
    – Syzoth
    Commented 29/01/2020 às 17:07
  • pode colocar a sua resposta Commented 29/01/2020 às 17:26
-2

No meu caso esto usando React com typeScript, o que resolveu foi:

Importe o pacote redux-devtools-extension no seu arquivo e use a função composeWithDevTools para criar o aprimorador da sua store. Em seguida, você pode passar o aprimorador como argumento para a função createStore. Veja o exemplo abaixo:

import { createStore, applyMiddleware } from "redux";
import { composeWithDevTools } from "redux-devtools-extension";
import rootReducer from "../reducers/";

const store = createStore(
  rootReducer,
  composeWithDevTools(applyMiddleware(/* your middlewares here */))
);

export default store;

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .