使用 TS 的 Redux DevTools 扩展出现错误：“属性 '__REDUX_DEVTOOLS_EXTENSION_COMPOSE__' 在类型 'Window' 上不存在。”？

问题描述 投票：0回答：11

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

类型“Window”上不存在属性“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。非常感谢您提前提供有关正在发生的事情的任何提示。

reactjs typescript redux react-redux redux-devtools-extension
11个回答
124
投票

这是这个问题的一个特例。 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__
。

36
投票

使用 

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
。

27
投票

这就是您在 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
。

现在您可以像平常一样在 

Provider
中使用 
React.js
：

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();
22
投票

我解决这个问题的方法如下：

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

发挥魅力：

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

);
4
投票

我也遇到了同样的问题，我也使用 redux-thunk 作为中间件。跑步

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

然后添加

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

to 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()
3
投票

如果有人仍然遇到这个问题，我修复了它，这是我的最终 store.js 文件 带有以下软件包 1-Redux 重击 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
);
1
投票

同样的问题改变了，我刚刚改变了

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

应用问题
1
投票

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

我尝试了这个，但仍然出现错误，所以我尝试了： “客户端”：“cd 客户端 && cd my-app && npm start”，

这对我有用！问题是，当您在“client”文件夹中使用 create-react-app 时，客户端文件夹与 public 和 src 文件夹之间会增加一个级别，默认情况下称为“my-app”。使用 Brad 的代码，npm 会丢失此文件夹，因此无法找到启动应用程序所需的 React 文件。

1
投票

就我而言，我使用了

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

0
投票

对于 Typescript，您需要遵循这些命令

-> npm install @redux-devtools/extension

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.