06. Redux의 장점 : 시간여행

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라는 것을 일목요연하게 볼 수 있다는 장점이 있다.