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

这是 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__。

---

使用 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。

---

这就是您可以在 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;

然后创建一个商店。

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

---

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

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

---

作为魅力工作：

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

);

---

但是我也遇到了同样的问题，我也使用 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()

---

如果有人仍然遇到这个问题，我修复了它，这是我的最终 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
);

---

有同样的问题改变了我只是改变了

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 应用问题

---

对于任何难以同时工作的人，我发现的一般建议是将 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 错过了这个文件夹，因此找不到启动应用程序所需的反应文件。

---

就我而言，我使用了 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

---