리덕스 개발자 도구와 리덕스 사가 동시에 사용하기 (타입스크립트)

1. 사가 사용 전 createStore함수

import modules, { StoreState } from './modules';
import { createStore, Store, applyMiddleware } from 'redux';

export default function configureStore(): Store<StoreState> {
  const store = createStore(
    modules,
    (window as any).__REDUX_DEVTOOLS_EXTENSION__ &&
      (window as any).__REDUX_DEVTOOLS_EXTENSION__(),
  );
  sagaMiddleware.run(rootSaga);
  return store;
} 

여기서 createStore 함수에 2번째 인자로 들어간

(window as any).__REDUX_DEVTOOLS_EXTENSION__ &&

(window as any).__REDUX_DEVTOOLS_EXTENSION__()

이 놈은 크롬 리덕스 개발자 도구에서 스토어를 볼 수 있게 해주는 부분이다.

 

2. 리덕스 사가를 추가하려고 시도 -> 오류

import modules, { StoreState } from './modules';
import { createStore, Store, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga';
import rootSaga from './sagas';

const sagaMiddleware = createSagaMiddleware();

export default function configureStore(): Store<StoreState> {
  const store = createStore(
    modules,
    (window as any).__REDUX_DEVTOOLS_EXTENSION__ &&
      (window as any).__REDUX_DEVTOOLS_EXTENSION__(),
    applyMiddleware(sagaMiddleware),
  );
  sagaMiddleware.run(rootSaga);
  return store;
}

아마도 둘 다 2번째 인자에 들어가야 하는 것 같다.

 

3. redux-devtools-extension 모듈이 있다고 해서 설치 후 적용

import modules, { StoreState } from './modules';
import { createStore, Store, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import createSagaMiddleware from 'redux-saga';
import rootSaga from './sagas';

const sagaMiddleware = createSagaMiddleware();

export default function configureStore(): Store<StoreState> {
  const store = createStore(
    modules,
    composeWithDevTools(applyMiddleware(sagaMiddleware)),
  );
  sagaMiddleware.run(rootSaga);
  return store;
}

 

4. 모듈 없이도 적용 가능한 방법 -> 타입스크립트에서 오류

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

import modules, { StoreState } from './modules';
import { createStore, Store, applyMiddleware, compose } from 'redux';
import createSagaMiddleware from 'redux-saga';
import rootSaga from './sagas';

// 사가 미들웨어 생성
const sagaMiddleware = createSagaMiddleware();

const composeEnhancers =
  typeof window === 'object' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
    ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
        // Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...
      })
    : compose;

const enhancer = composeEnhancers(
  applyMiddleware(sagaMiddleware /*other middleware*/),
  /* other store enhancers if any */
);

export default function configureStore(): Store<StoreState> {
  const store = createStore(modules, enhancer);
  sagaMiddleware.run(rootSaga);
  return store;
}

__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ <- 이거 타입 지정이 안 되어있어서 생기는 문제 같음

 

5. 그래서 타입을 지정해서 사용

import modules, { StoreState } from './modules';
import { createStore, Store, applyMiddleware, compose } from 'redux';
import createSagaMiddleware from 'redux-saga';
import rootSaga from './sagas';

// 사가 미들웨어 생성
const sagaMiddleware = createSagaMiddleware();

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

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const enhancer = composeEnhancers(
  applyMiddleware(sagaMiddleware /*other middleware*/),
  /* other store enhancers if any */
);

export default function configureStore(): Store<StoreState> {
  const store = createStore(modules, enhancer);
  sagaMiddleware.run(rootSaga);
  return store;
}

굳이 모듈 없어도 쓸 수 있으니까 그냥 지우고 써야겠다

---

참고 :

https://stackoverflow.com/questions/52640146/how-to-run-redux-devtools-with-redux-saga

https://github.com/zalmoxisus/redux-devtools-extension#12-advanced-store-setup

https://stackoverflow.com/questions/52800877/has-anyone-came-across-this-error-in-ts-with-redux-dev-tools-property-redux