리덕스를 사용하며 리덕스 상태를 좀 더 쉽게 디버깅 할 수 있도록 도와주는 툴이 있다.
바로 Redux Devtools 이다.
프로젝트를 개발하면서 많은 리덕스 상태가 여러 다른 슬라이스로 처리되며 다양한 엑션이 진행되는 복잡한 애플리케이션에선 엑션등의 디버그 상태에서 오류를 찾기가 힘들 수 있다.
이를 확인하기 위해 각각의 UI를 볼 필요 없이 전체 리덕스 스토어의 현재 상태를 파악 할 수 있다면 훨씬 편하게 관리 가능 할것 같다.
devtools 설치 밎 적용
리덕스 데브툴스는 브라우저 확장으로 사용 및 설치를 할 수 있다.
단, 일반 리덕스로 사용하게 되면 데브툴이 작동하도록 몇가지 코드를 추가해야하지만, 리덕스 툴킷을 사용하면 즉시 사용할 수 있다.
개발자도구 에 Redux나 확장 프로그램 우측 상단에 아이콘을 클릭하면 위와 같이 해당 패널들이 나온다.
여기서 리덕스 스토어에 대한 인사이트 및 엑션등 여러가지 확인이 가능하다.
왼쪽편엔 전달된 Action이 표시되고 만약 다시 리로드 하면 재확인하고 교체한다.
@@INIT은 모든 초기 상태를 리덕스에 적용하여 스토어를 초기화 해준다.
그리고 초기 렌더링 시 서버로부터 데이터를 fetch했기 때문에 교체된 데이터가 디스패치 되었다.
여기서 내가 항목아이템 하나를 추가하면
action탭에 차례로 해당 이벤트가 트리거 되면서 진행되는 작업들이 표시된다.
(추가 아이템 전송, 알림 표시)
위 앱을 예로들어,
장바구니에 새로운 아이템을 추가(addCart)하면 스토어에서 상태가 변경되고 변경되니 다시 리랜더링 후 useEffect안 비동기 로직을 전달했던 sendCartData의 일부로 알림 actions들을 디스패치 할수 있었기 때문에
데브툴스 화면에서도 그대로 확인이 가능했던 것이다!
해당 Action들을 각각 클릭하면 엑션에 의해 전송된 데이터 및 상태가 어떻게 변경 되었는지 인사이트를 얻을 수 있다.
여기서도 오른쪽 부분에 Action패널을 살펴볼때, type안에 리덕스 툴킷이 제공하는 기본적인 slice name값과 reducer메소드의 이름이 고유 식별자가 된걸 볼 수 있다. type(pin): "cart/addCart"
Diff패널은 이전과 어떻게 업데이트 되어 달라져있는지도 확인이 가능하다.
그리고 추가로 Jump를 통해 해당 항목의 jump 버튼을 누르면 새로 추가된 action 이전 상태로 이동할 수 있다.
그렇게 했을때 해당 시점의 action으로 돌아가서 디버깅을 시작할 수 있고, 새로운 상태로 다시 이동 할 수도 있다.
리덕스 데브툴은 리덕스 스토어에 대한 더 깊은 이해도와 통찰력을 기를 수 있을것 같다. 아직은 보기 좀 어려운감이 있지만, 진행 상황을 이해하기엔 너무나 도움이 될것 같다는 느낌이 있다.
