[Redux] 5. 리덕스 개발자도구 적용하는 방법

리덕스 개발자 도구를 사용하게 되면 다음과 같은 장점들이 존재한다.

1. 현재 스토어의 상태를 확인할 수 있다
2. 현재까지 어떤 액션들이 디스패치 되었는지 확인할 수 있다
3. 액션에 따라 상태가 어떻게 변화됐는지 확인할 수 있다
4. 액션을 직접 디스패치 할 수 있다

이렇게 많은 장점들이 존재하기 때문에 리덕스 개발자 도구를 안 쓸 이유가 없다!!

 

리덕스 개발자 도구를 프로젝트에 적용하는 과정은 다음과 같다.

1. 크롬 웹 스토어에서 리덕스 개발자 도구 설치

2. 프로젝트에 redux-devtools-extension을 설치

👉 터미널창에 다음과 같이 명령어 입력

$ yarn add redux-devtools-extension

3. 기존의 index.js를 다음과 같이 수정한다.

- redux-devtools-extension 라이브러리를 프로젝트에 import한다.

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

- 스토어를 만들 때 composeWithDevTools를 파라미터로 넣어준다.

const store = createStore(rootReducer, composeWithDevTools());

적용 결과

브라우저로 돌아와서 개발자 도구를 실행하면 Redux탭이 생성된 것을 확인할 수 있다.

Redux탭으로 이동하면 현재 상태와 액션 기록들을 확인할 수 있다.

 

참고

벨로퍼트와 함께하는 모던 리액트 https://react.vlpt.us/redux/06-redux-devtools.html