TS를 사용하는 Redx DevTools 확장과 관련된 오류: "속성 '_REDUX_DEVTOOLS_EXTION_COMPOSE__'이(가) '윈도' 유형에 없습니다."

TS를 사용하는 Redx DevTools 확장과 관련된 오류: "속성 '_REDUX_DEVTOOLS_EXTION_COMPOSE__'이(가) '윈도' 유형에 없습니다."

이 에러는 index.tsx 에 표시됩니다.

유형 '창'에 'REDUX_DEVTOOLS_EXTENSION_COMPOSE' 속성이 없습니다.

다음은 내 index.tx 코드입니다.

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-devredux-devtools-extension을 설치하고 create-react-app-typescript를 사용하고 있습니다.무슨 일이 일어나고 있는지 미리 알려줘서 정말 고마워.

이것은 이 질문의 특별한 경우입니다.Redux는 다음 유형을 제공하지 않습니다.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__이 기능은 Redux 자체가 아니라 Redux DevTools에 의해 노출되기 때문입니다.

다음 중 하나입니다.

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 타이핑이 포함된 패키지에 의해 수행됩니다.인스톨 되어 있는 경우는, Import를 사용해 액세스 할 필요가 없습니다.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__수동으로 조작할 수 있습니다.

이 기능을 사용하기 위한 가장 능률적인 방법TypeScript는 다음과 같이 redux-devtools-devlos를 사용하여 개발 의존관계로 설치합니다.

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최소한의 형태로요.

이 방법으로 사용할 수 있습니다.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 - 저 같은 경우에는combinedReducerssurparate 파일로 작성되었습니다.

이제 사용할 수 있습니다.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();

이 문제에 대한 저의 접근법은 다음과 같습니다.

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 - Redx Thunk 2 - Connected Respect 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

undefined 삼다createStore(reducer, initial state, compose(applyMiddleware

동시 출근에 어려움을 겪고 있는 분들을 위해 제가 찾은 일반적인 조언은 "클라이언트" 스크립트를 패키지로 대체하라는 것입니다.json with "client" : "cd client & npm start",

이것을 시도해도 아직 에러가 나서, 「클라이언트」: 「cd client & cd my-app & npm start 」,

나한텐 효과가 있었어!문제는 "client" 폴더 내에서 create-react-app을 사용할 때 클라이언트 폴더와 공용 폴더 및 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
    };
}

#440js

언급URL : https://stackoverflow.com/questions/52800877/error-with-redux-devtools-extension-using-ts-property-redux-devtools-extens