使用 TS 的 Redux DevTools 扩展出错:“属性 '__REDUX_DEVTOOLS_EXTENSION_COMPOSE__' 在类型 'Window' 上不存在."? [英] Error with Redux DevTools Extension using TS: "Property '__REDUX_DEVTOOLS_EXTENSION_COMPOSE__' does not exist on type 'Window'."?

问题描述

我的 index.tsx 出现此错误.

I'm getting this error on my index.tsx.

属性REDUX_DEVTOOLS_EXTENSION_COMPOSE"在Window"类型上不存在.

Property 'REDUX_DEVTOOLS_EXTENSION_COMPOSE' does not exist on type 'Window'.

这是我的 index.tsx 代码:

Here is my index.tsx code:

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.非常感谢您提前提供有关正在发生的事情的任何提示.

I've installed @types/npm install --save-dev redux-devtools-extension and I'm using create-react-app-typescript. Thanks alot for any tips for what's going on in advance.

推荐答案

这是在 typescript react 应用程序中使用 redux-dev-tools 的方法.

This is how you can use redux-dev-tools in a typescript react application.

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.

现在你可以像往常一样在 React.js 中使用 Provider 作为:

Now you can use Provider as usual in React.js as:

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

index.tsx

中的所有代码

All the code in the index.tsx

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import rootReducers from "./reducers";

import { Provider } from "react-redux";
import { createStore, compose, applyMiddleware } from "redux";

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

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(rootReducers, composeEnhancers());

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

这篇关于使用 TS 的 Redux DevTools 扩展出错:“属性 '__REDUX_DEVTOOLS_EXTENSION_COMPOSE__' 在类型 'Window' 上不存在."?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！