Ошибка с расширением Redux DevTools с использованием TS: свойство «__REDUX_DEVTOOLS_EXTENSION_COMPOSE__» не существует для типа «Window».?

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

Or:

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__ вручную.

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

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

Самый простой способ сделать эту работу с 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 в его минимальной форме.

Работает как оберег:

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

);

если кто-то все еще застрял в этой проблеме, я исправил ее, и это мой последний файл 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
);

Если бы такая же проблема изменилась, я только что изменил

window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()

to

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

чтобы обойти undefined проблему с применением при использовании createStore(reducer, initial state, compose(applyMiddleware

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

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

Это сработало для меня! Проблема в том, что когда вы используете приложение create-response-app внутри «клиентской» папки, между клиентской папкой и общими папками и папками src есть дополнительный уровень, который по умолчанию называется «my-app». Используя код Брэда, 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