[Develop/React] 리덕스 개발자 도구 사용

리덕스 개발자 도구 사용

리덕스 개발 시 디버깅에 유용한 툴로 스토어의 상태나 어떤 액션들이 디스패치 되었는지 알 수 있어 유용한 툴이다.

설치방법

1. 크롬 웹 스토어에 접속한다.
https://chrome.google.com/webstore/category/extensions


2. Redux DevTools 검색한다.


3. 설치 후 크롬 개발자 도구를 열어 Redux 탭을 확인한다. (바로 생성되지 않을 경우 프로젝트 재실행)


4. 설치 후엔 아래와 같은 문구가 표출되며 제대로 작동하지 않을것이다.

5. 마지막으로 프로젝트 스토어 생성 부분에 툴을 인식 할 수 있도록 아래 소스를 추가한다.

const store = createStore(reducers, window.devToolsExtension && window.devToolsExtension());