redux 대부 툴 설치 방법
https://github.com/zalmoxisus/redux-devtools-extension
위에 있는 깃허브로 들어가 내리다보면 크롬버전으로 설치할 수 있는 것이 나온다.
Chrome Web Store를 클릭하여 들어가 확장기능을 설치한다.
설치하고 내리다보면 Basic store가 있다.
연두색 부분에서 +기호를 빼고 복사하여 red함수 위에 createStore한 함수 안에 붙여넣기 해준다.
홈페이지로 가 개발자도구를 클릭하면 redux가 생성된 것을 볼 수 있다.
redux 대부 툴 기능
fire버튼을 각각 클릭해보자.
버튼을 누를 때마다 바뀌는 state값을 보여준다.
따라서 redux 대부 툴이라는 것은 redux에서 store에게 전달된 action들을 버전관리하고 있다는 것을 알 수 있다.
그리고 버전마다 어떤 차이가 있는지를 알려준다.
또한, 화살표를 클릭해보면 전에 내가 했던 action들을 보여준다.
이것을 통해 지금까지 애플리케이션에서 store에게 전달한 action들을 replay할 수 있다는 것을 알 수 있다.
redux 장점
우리가 만든 애플리케이션이 복잡해졌을 때 문제가 발생했을 때 어떤 맥락에서 발생했는지 파악하는 것이 매우 중요하고 어렵다. 그러나 redux의 대부 툴을 이용하게 되면 이러한 것들을 아주 간편하게 할 수 있게 된다.
redux에서 reducer를 통해 return하는 값은 불변해야 한다.
다시 말해, 원본을 변경하면 안 된다는 것으로 원본을 복제해서 복제한 것을 변경해 return해야 한다고 하였다.
이러한 데이터들의 독립성으로 인해 시간여행이 가능한 것이다.
redux는 모든 관리해야 하는 상태는 store에 다 보관되어 있다.
redux는 단 하나의 store를 유지하는데, 그 store는 reducer를 통해 가공되기 때문에 우리가 애플리케이션의 상태가 궁금하면 reducer를 이용하면 된다.
reducer함수 안에 29행에 아래 코드를 추가한다.
console.log(action.type, action, state, newState);
그리고 홈페이지로 가 개발자도구의 console로 이동해 fire버튼을 누른 후를 확인해본다.
CHANGE_COLOR라는 action이 발생하였고, action값은 {type: "CHANGE_COLOR", color: "red"}인데,
이전에 데이터는 yellow였고, 바뀐 데이터는 red라는 것을 일목요연하게 볼 수 있다는 장점이 있다.
'🌐 Web > Redux' 카테고리의 다른 글
08. 웹페이지 만들기(2) (0) | 2022.09.14 |
---|---|
07. 웹페이지 만들기(1) (0) | 2022.09.08 |
05. Redux를 이용한 애플리케이션 : state의 변화를 UI에 반영 (0) | 2022.09.06 |
04. Redux를 이용한 애플리케이션 : reducer와 action을 이용해서 새로운 state 값 만들기 (0) | 2022.09.03 |
03. Redux를 이용한 애플리케이션 : store 생성 (0) | 2022.09.03 |