77

我的 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。非常感谢您提前提供的任何提示。

4

10 回答 10

110

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

于 2018-10-14T09:05:24.003 回答
29

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

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最小形式使用。

于 2019-09-05T02:51:28.777 回答
22

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

export const composeEnhancers =
  (window && (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__) || compose;
于 2019-04-14T10:15:16.367 回答
20

这就是您可以redux-dev-tools在 typescript react 应用程序中使用的方式。

为对象创建全局接口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();
于 2021-07-01T14:37:11.673 回答
11

作为魅力工作：

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

);
于 2019-08-10T07:47:30.653 回答
4

但是我也遇到了同样的问题，我也使用 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()
于 2021-08-28T11:43:37.613 回答
3

如果有人仍然遇到这个问题，我修复了它，这是我的最终 store.js 文件，其中包含以下包 1- Redux Thunk 2- Connected React Router 3- History

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
);
于 2020-01-23T10:57:49.767 回答
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

于 2018-12-19T23:51:41.520 回答
1

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

我试过这个，我仍然得到一个错误，所以我尝试了：“client”：“cd client && cd my-app && npm start”，

这对我有用！问题是，当您在“client”文件夹中使用 create-react-app 时，在 client 文件夹与您的 public 和 src 文件夹之间添加了一个级别，默认情况下称为“my-app”。使用 Brad 的代码，npm 错过了这个文件夹，因此找不到启动应用程序所需的反应文件。

于 2020-05-05T21:00:21.483 回答
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

于 2021-05-01T01:26:45.913 回答