使用TS的Redux DevTools扩展出错："属性'__REDUX_DEVTOOLS_EXTENSION_COMPOSE__'在类型'窗口'上不存在。"？

Question

我的index.tsx.出现了这个错误

类型Windows中不存在属性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扩展，我正在使用create react app typescript。非常感谢你提前告诉我发生了什么事。

Answer 1

我对这个问题的态度如下：

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

Answer 2

使用TypeScript最简化的方法是使用redux devtools扩展并作为开发依赖项安装，如下所示：

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

此时，如果在浏览器中单击扩展，并且存在有效的redux存储，则可以检查状态。

这是使用（任何窗口）的另一种方法，并且还明确了如何以最小的形式使用redux devtools扩展。

Answer 3

这是这个问题的一个特例。Redux不提供\uuuuu Redux\u DEVTOOLS\u EXTENSION\u COMPOSE\uuuuu的类型，因为此函数是由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;

这已经通过包含TypeScript类型的redux-devices-扩展名包完成了。如果已安装，则应使用其导入，而不是手动访问__REDUX_DEVTOOLS_EXTENSION_COMPOSE__。