TS Redux devtools 확장 오류

holang-i·2023년 4월 13일
0

에러 발생

react + typescript 환경으로 설정한 프로젝트에서 리덕스 devtools를 설정할 때 오류가 발생했다.


에러 문구

Property '__REDUX_DEVTOOLS_EXTENSION__' does not exist on type 'Window & typeof globalThis'.

에러 원인

TypeScript 컴파일러가 'REDUX_DEVTOOLS_EXTENSION' 속성이 Window or globalThis 타입에 존재하지 않는다는 것을 알려주고 있다.

이 에러는 Redux 개발 도구를 사용할 때 발생할 수 있는데 Redux 개발 도구는 브라우저 환경에서 작동하며

'REDUX_DEVTOOLS_EXTENSION' 이라는 전역 변수를 제공한다.

이 변수를 사용하여 Redux Store를 구성하고, 개발 도구를 연결할 수 있다.


에러 해결하기

이 문제를 해결하기 위해 코드에 다음과 같은 코드를 추가하여
REDUX_DEVTOOLS_EXTENSION 변수가 존재하는지 확인해볼 수 있다.

declare global {
  interface Window {
    __REDUX_DEVTOOLS_EXTENSION__?: typeof compose; 
  }
}

위 코드는 Window 인터페이스를 확장하여 REDUX_DEVTOOLS_EXTENSION 속성을 선택적으로 추가합니다.

이렇게 하면, TypeScript 컴파일러가 해당 속성이 존재하는 것으로 간주하여 에러를 방지할 수 있다.

전체 코드

import React from 'react';
import ReactDOM from 'react-dom/client';

import {
  applyMiddleware,
  compose,
  legacy_createStore as createStore,
} from 'redux';
import { Provider } from 'react-redux';
import PromiseMiddleware from 'redux-promise';
import ReduxThunk from 'redux-thunk';
import Reducer from './_reducer';

import App from './App';

declare global {
  interface Window {
    __REDUX_DEVTOOLS_EXTENSION__?: typeof compose;
  }
}

const createStoreWithMiddleware = applyMiddleware(
  PromiseMiddleware,
  ReduxThunk
)(createStore);

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <Provider
      store={createStoreWithMiddleware(
        Reducer,
        window.__REDUX_DEVTOOLS_EXTENSION__ &&
          window.__REDUX_DEVTOOLS_EXTENSION__()
      )}
    >
      <App />
    </Provider>
  </React.StrictMode>
);

참고

profile
🌿 주니어 프론트엔드 개발자입니다! 부족하거나 잘못된 정보가 있다면 알려주세요:)

0개의 댓글