Redux DevTools

리액투트론은 별도의 프로그램을 실행시켜서 리덕스를 디버깅하고 테스트 하는 방법이다.

반면 Redux DevTools는 크롬 웹스토어에서 설치해서 콘솔처럼 사용할 수 있는 방법이다.

state들을 차트로도 볼 수 있어서 더 편리하다.

크롬 웹 스토어에서 redux devtools로 검색해서 설치할 수 있고, 

이를 자신의 프로젝트에서 활성화 시키려면 다음과 같이 하면 된다.

설치

#> yarn add redux-devtools-extension --dev

리덕스 스토어 설정

import { composeWithDevTools } from "redux-devtools-extension";

if(env === 'development'){
    store = initialState => 
        createStore(reducer, composeWithDevTools(applyMiddleware(...middlewares)));    
} else {
    store = initialState => createStore(reducer, applyMiddleware(...middlewares));
}

리액투트론을 사용하지 않을 것이기때문에 전에 설정했던 리액투트론을( Reactotron. ~~ ) 을 삭제하고,

뒷부분에 미들웨어를 설정하는 부분에서 설치한 composeWithDevTools를 사용해서 미들웨어를 지정한다.

이렇게만 설정을 해주고 다시 앱을 실행하면

 

이렇게 크롬 url창 옆에 색이 입혀지고 

다음과 같이 디버깅을 할 수 있게된다.

Redux DevTools와 Redux-logger를 같이 사용하여 프로젝트를 진행하면 편리하다