Кто-нибудь столкнулся с этой ошибкой в TS с помощью средств decux dev? "Свойство" __REDUX_DEVTOOLS_EXTENSION_COMPOSE__ "не существует в типе" Окно "."?

Я получаю эту ошибку на моем index.tsx.

Свойство " REDUX_DEVTOOLS_EXTENSION_COMPOSE " не существует в типе "Окно".

Вот мой код 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();

Я установил @types/npm install --save-dev redux-devtools-extension, и я использую create-react-app-typescript. Большое спасибо за любые советы о том, что происходит заранее.

Ответ 1

Это частный случай этого вопроса. Redux не предоставляет типы для __REDUX_DEVTOOLS_EXTENSION_COMPOSE__ потому что эта функция предоставляется Redux DevTools, а не самим Redux.

Это либо:

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

Или же:

declare global {
    interface Window {
      __REDUX_DEVTOOLS_EXTENSION_COMPOSE__?: typeof compose;
    }
}

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

Это уже сделано с redux-devtools-extension пакета redux-devtools-extension, который содержит типизированные шрифты. Если он установлен, его импорт следует использовать вместо того, чтобы обращаться к __REDUX_DEVTOOLS_EXTENSION_COMPOSE__ вручную.

Ответ 2

Мой подход к проблеме был следующим:

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

Ответ 3

Изменился ли тот же вопрос, я только что изменился

window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()

window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__() || compose

преодолеть undefined проблему применения при использовании createStore(reducer, initial state, compose(applyMiddleware

Ответ 4

Работая как шарм:

const store = createStore(
    rootReducer,
    initialState,
    compose(
        applyMiddleware(...middleware),
        (window as any).__REDUX_DEVTOOLS_EXTENSION__ && (window as any).__REDUX_DEVTOOLS_EXTENSION__()
    )       

);

Ответ 5

Самый простой способ сделать эту работу с TypeScript - это использовать redux-devtools-extension и установить как зависимость dev следующим образом:

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

Следующий шаг для новичков в redux и этих инструментов разработчика был запутанным и неясным. Все документы имеют следующий код:

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

Проблема в том, что у меня не настроено промежуточное программное обеспечение, поэтому оно не работает. В самом примитивном использовании это все, что вам нужно:

import { composeWithDevTools } from 'redux-devtools-extension';

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

На этом этапе, если вы щелкнете по расширению в браузере и в нем будет действительное хранилище с избыточностью, вы сможете проверить состояние.

Это альтернативный подход к использованию (window as any), а также разъясняет, как использовать redux-devtools-extension в его минимальной форме.