有人使用redux开发工具在TS中遇到此错误吗？“类型'Window'上不存在属性'__REDUX_DEVTOOLS_EXTENSION_COMPOSE__'。”？

Question

我在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。非常感谢您提前进行的提示。

Answer 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包含TypeScript类型的包完成。如果已安装，则应使用其导入，而不是__REDUX_DEVTOOLS_EXTENSION_COMPOSE__手动访问。

Answer 2

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

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 存储，您将能够检查状态。

这是使用的另一种方法，(window as any)并且还明确了如何以redux-devtools-extension最小形式使用 。

Answer 3

这就是您可以redux-dev-tools在打字稿反应应用程序中使用的方式。

为Window对象创建全局接口：

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

然后，创建composeEnhancers如下：

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

然后创建一个store.

const store = createStore(rootReducers, composeEnhancers());

rootReducers- 在我的情况下是指combinedReducers在一个单独的文件中创建。

现在您可以Provider像往常一样使用React.js：

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById("root")
);

里面的所有代码 index.tsx

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById("root")
);

Answer 4

作为魅力工作：

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

);

Answer 5

我对这个问题的处理方法如下：

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