使用 TS 的 Redux DevTools 扩展出错："Property '__REDUX_DEVTOOLS_EXTENSION_COMPOSE__' does not exist on type 'Window'."？

Question

我在 index.tsx 上收到此错误。

属性 'REDUX_DEVTOOLS_EXTENSION_COMPOSE' 在类型 'Window'.

上不存在

这是我的 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

这是this question的特例。 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;

这已经由包含 TypeScript 类型的 redux-devtools-extension 包完成。如果已安装，则应使用其导入而不是手动访问 __REDUX_DEVTOOLS_EXTENSION_COMPOSE__。

Answer 2

有同样的问题改变我刚刚改变

window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()

到

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

解决使用 createStore(reducer, initial state, compose(applyMiddleware

时的 undefined 应用问题

Answer 3

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

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

Answer 4

工作魅力：

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

);

Answer 5

使此功能与 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 6

如果还有人遇到这个问题，我已经解决了，这是我最后的 store.js 文件带有以下包 1- Redux Thunk 2-连接的反应路由器 3- 历史

import { createStore, applyMiddleware, compose } from 'redux';
import { routerMiddleware } from 'connected-react-router';
import thunk from 'redux-thunk';
import {createBrowserHistory} from 'history';
import rootReducer from '../redux/reducers';
export const history = createBrowserHistory();
const initialState = {}
const enhancers = []
const middleware = [
    thunk,
    routerMiddleware(history)
]

if (process.env.NODE_ENV === 'development') {
    const devToolsExtension = (window as any).__REDUX_DEVTOOLS_EXTENSION__ && (window as any).__REDUX_DEVTOOLS_EXTENSION__() || compose;
    if (typeof devToolsExtension === 'function') {
        enhancers.push(devToolsExtension)
    }
}

const composedEnhancers = compose(
    applyMiddleware(...middleware),
    ...enhancers
);

export default createStore(
    rootReducer,
    initialState,
    composedEnhancers
);

Answer 7

对于任何难以同时工作的人，我发现的一般建议是将 package.json 中的 "client" 脚本替换为： "client": "cd client && npm start",

我试过了，还是报错，于是我试了： "client": "cd client && cd my-app && npm start",

这对我有用！问题是，当您在 "client" 文件夹中使用 create-react-app 时，在 client 文件夹与您的 public 和 src 文件夹之间增加了一个级别，称为 "my-app"默认。使用 Brad 的代码，npm 缺少此文件夹，因此无法找到启动您的应用程序所需的反应文件。

Answer 8

在我的例子中，我使用了 react-redux-devtools。试试这个解决方案，它可能会帮助您解决问题。

import { applyMiddleware, createStore } from "redux";
import { composeWithDevTools } from "redux-devtools-extension";
import createSagaMiddleware from "redux-saga";
import { rootReducer } from "../reducers";
import { AppState } from "@eneto/api-client";

import { initUserState } from "../../modules/users/user-reducer";
import { initUsersState } from "../../modules/users/users-reducer";
import { initListsState } from "../../modules/lists/lists-reducer";
import { initListState } from "../../modules/lists/list-reducer";

// initialValues
const init: AppState = {
    currentUser: initUserState,
    users: initUsersState,
    lists: initListsState,
    currentList: initListState
};

export function store(initialState: AppState = init) {
    const sagaMiddleware = createSagaMiddleware();
    const middleware = [sagaMiddleware];

    return {
        ...createStore(rootReducer, initialState, composeWithDevTools(applyMiddleware(...middleware))),
        runSaga: sagaMiddleware.run
    };
}

#reactjs

Answer 9

这是在 typescript React 应用程序中使用 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。

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

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

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

Answer 10

不过我也有同样的问题，我也在使用 redux-thunk 作为中间件。运行

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

然后加入

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

到 index.tsx 对我有用，并将商店更新为

const store = createStore(rootReducer, composeWithDevTools(applyMiddleware(thunk)))

我的完整 index.tsx 如下。希望这能帮助任何遇到使用中间件（如 redux-thunk

）的相同问题的人

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './containers/App/App'
import { BrowserRouter } from 'react-router-dom'
import { Provider } from 'react-redux'
import { createStore, applyMiddleware, combineReducers } from 'redux'
import thunk from 'redux-thunk'
import authReducer from './store/reducers/auth'
import * as serviceWorker from './serviceWorker'
import { composeWithDevTools } from 'redux-devtools-extension'


const rootReducer = combineReducers({
  auth: authReducer
})
const store = createStore(rootReducer, composeWithDevTools(applyMiddleware(thunk)))

const app = (
  <Provider store={store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>
)

ReactDOM.render(app, document.getElementById('root'))

serviceWorker.unregister()

使用 TS 的 Redux DevTools 扩展出错："Property '__REDUX_DEVTOOLS_EXTENSION_COMPOSE__' does not exist on type 'Window'."？

Error with Redux DevTools Extension using TS: "Property '__REDUX_DEVTOOLS_EXTENSION_COMPOSE__' does not exist on type 'Window'."?

typescript

reactjs

redux

react-redux

redux-devtools-extension

为 Window 对象创建全局接口：

然后，创建composeEnhancers如下：

然后创建一个store.

index.tsx

为 `Window` 对象创建全局接口：

然后，创建`composeEnhancers`如下：

然后创建一个`store`.

`index.tsx`