Кто-нибудь сталкивался с этой ошибкой в ​​TS с инструментами redux dev? "Свойство '__REDUX_DEVTOOLS_EXTENSION_COMPOSE__' не существует для типа" Окно "."?

Я получаю эту ошибку на моем 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-реагировать-app-typecript. Большое спасибо за любые советы о том, что происходит заранее.

Источник

10 ответов

Решение

Вот как вы можете использовать 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();
Источник

Это частный случай этого вопроса. 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__ вручную.

Источник

Самый простой способ сделать эту работу с TypeScriptзаключается в использовании расширения redux-devtools и установке в качестве зависимости разработчика следующим образом:

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 в минимальном виде.

Источник

Мой подход к проблеме был следующим:

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'

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()
Источник

Если кто-то все еще застрял в этой проблеме, я исправил ее, и это мой последний файл store.js со следующими пакетами: 1- Redux Thunk 2- Connected React Router 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
);
Источник

В моем случае я использовал 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

Источник

Для тех, кто борется с одновременной работой, общий совет, который я нашел, - заменить ваш "клиентский" скрипт в package.json на: "client": "cd client && npm start",

Я пробовал это, но все равно получаю ошибку, поэтому я попробовал: "client": "cd client && cd my-app && npm start",

Это сработало для меня! Проблема в том, что когда вы используете приложение create-response-app внутри "клиентской" папки, между клиентской папкой и общими папками и папками src есть дополнительный уровень, который по умолчанию называется "my-app". Используя код Брэда, npm пропускает эту папку, поэтому не может найти файлы реакции, необходимые для запуска вашего приложения.

Источник

Изменился ли тот же вопрос, я только что изменился

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

Источник
Другие вопросы по тегам