[Redux] Pure Redux: Counter

0. Vanilla Counter

• Redux는 기본적으로 Javascript Application들의 state(상태)를 관리하는 방법이다.
• React뿐만 아니라 Angular, Vue.js, Vanilla Javascript 등 원하는 곳에 쓸 수 있다.
• 먼저 project를 시작하기 위해 다음과 같은 명령어를 실행한다.

 

 

• 디렉터리가 만들어지고 해당 디렉터리로 이동한다.

 

 

• redux를 사용하지 않는 버전을 보기 위하여 /src/index.js에서 간단하게 코드를 작성한다.

 

 

• yarn start 명령어를 실행하면 다음과 같은 화면을 볼 수 있다.

 

---

1. Store & Reducer

• redux를 사용하는 버전에 대하여 살펴보겠다.
• 먼저 redux를 사용하기 위해 yarn add redux(혹은 npm install redux)를 실행한다.

• 다음과 같이 import를 해준다.

• store는 뭘까?
  • store는 data를 넣는 곳이다. 즉 state를 넣는 곳이다.
• state는 나의 application에서 바뀌는 data를 말한다.
• 위 예제에서는 count가 state이다. 아래에 있는 함수들은 모두 count를 modify하기 위한 목적이다.
• 리덕스에는 createStore이라는 function(함수)가 있다.
• store가 하는 일은 기본적으로 나의 data를 넣을 수 있는 장소를 생성해 주는 것이다.
• 리덕스는 data를 관리하는데 도와주는 역할을 하기 위해 만들어졌다.

 

• 이제 data를 store에 넣어보겠다.
• store를 만들고 reducer를 만들지 않으면 에러가 난다.
• 따라서 reducer를 만들어준다.
• reducer가 뭘까?
  • reducer는 data를 modify(수정)하는 function(함수)이다.
• 여기서 reducer는 count를 increase하거나 decrease하는 것이 되겠다.
• 아래와 같은 예시를 보면 reducer가 "hello"를 반환한다. 이 "hello"가 application에 있는 data(state)가 된다.

• 중요 : reducer가 return 하는 것은 나의 application의 data가 되는 것이다.
• 오직 reducer만 유일하게 data를 modify할 수 있다.
• 그렇다면 어떻게 reducer안에서 state를 바꿀까?
  • action을 통해서 바꾼다!

• 정리해보면 createStore는 store를 create하고 store는 나의 data를 저장하는 곳이다. 위 케이스에서 data는 0이 되고 그게 data가 되는 것이다.
• 우리가 store를 만든다면 store애 reducer(여기선 countModifier)를 줘야 한다.
• default로 reducer(=data modifier)는 현재의 state와 함께 불려질 것이다. 
• 이제 아래에서 어떻게 data(count)를 modify할지 보겠다.

---

2. Actions

• data를 modify한다. 어떻게??? action을 통해!
• action은 redux에서 function을 부를 때 쓰는 두번째 paramater, 혹은 argument이다.
• 그래서 다음과 같이 console.log(count, action) 을 하면 어떤 결과가 나오는지 확인해보겠다.

코드

결과화면

• 위에 action에 해당하는 값을 보면 괴상한 값이 나온다. action은 countModifier와 소통하기 위한 방법이다.
• action은 countModifier에게 말할 수 있는 방법이다.
• 이제 다음과 같이 dispatch를 도입해보겠다.

• 결과를 확인해보면 다음과 같다.

• countModifier가 2번 불린 것이다. 처음으로 initialized된 function과 type이라는 다른 action을 볼 수 있다.
• 보다시피 store, dispatch, action을 하면 redux가 countModifier를 부를 것이다.
  • countModifier(currentState = 0, {type: "HELLO"}) 와 같은 방식으로 부를 것이다.
• 이것이 내가 countModifier에게 메세지를 보내는 방법이다.

 

• 이제 적용을 시켜보겠다.

• 위 화면은 dispatch를 통해 countModifier로 메세지를 보내는 것이다.
• 위에서 말했듯 countModifier가 return 하는 모든 것은 data가 된다.
• 따라서 아래와 같이 코드를 작성할 수 있다.

• 위 코드를 설명해보면 다음과 같다.
• data의 store를 create하고 data의 modifier인 countModifier이 message를 그 store에 보내면 된다. 그 send하는 방법은 dispatch를 사용하면 된다. 전송한 message는 action에 넣으면 되고, 내가 해야 할 일은 action을 체크해보는 것이다.
• 이제 다른 action도 추가해보겠다.

• 정리해보면 나의 data를 modify할 수 있는 function은 countModifier이다. 그래서 나는 밖에서 countModifier와 communication 할 수 있어야 한다. 그리고 communication 하는 방법은 countModifier에게 action을 보내는 것이다.
• 위 과정을 보기 위해 action을 console에 찍어보자.

---

3. Subscriptions

• 이제 dispatch와 모든 것들을 우리의 button에 연결해보자.

• 다음과 같이 countStore를 console에 찍어보겠다.

• 다음과 같은 결과가 나온다.

• dispatch, getState가 보이고 subscribe라는 것이 보인다.
• subscribe가 뭘까?
  • subscribe는 우리에게 store안에 있는 변화들을 알 수 있게 해준다.
• subscribe의 기능을 보기위해 다음과 같이 작성한다.

• store를 구독(subscribe)하고 있다.
• 버튼을 누를때마다 store에 변화가 있다.
• 여기서 버튼을 누를때마다 number가 update되게 할 수 있다.

• 현재까지의 코드이다.

• 다음은 위에서 배운 것들의 요약(Recap)과 함께 코드를 정리(Refactoring)해보겠다.

---

4. Recap & Refactoring

• 위 예제의 countModifier(reducer)는 현재 상태의 application과 함께 불려지는 function이다.
• action은 countModifier와 소통하는 방법이다.
• countModifier가 return 하는 것은, application의 state이다. 즉, reducer가 return 하는 것은 무엇이든지 application의 state가 된다.
• reducer는 current state와 action이 함께 불려진다. 어떻게 reducer에게 action을 보내냐면 dispatch를 사용해서 보내는 것이다.
• dispatch가 reducer를 불러서 current state와 내가 보낸 action을 더한다. action은 object 이어야 한다. string이 될 수 없다.
• action은 type이 있어야 한다. 무조건!
• 만약에 내가 change를 나의 store에서 감지하고 싶다면 그 change를 subscribe하면 된다.
• 그래서 언제든지 store가 바뀔 때, 바뀌지 않은 function을 실행하면 된다.

 

• 위 내용이 지금까지 한 것을 요약한 것이고 이제 코드를 조금 바꿔보겠다.
• 위에서는 if / else if 를 사용하였지만 보통 switch를 많이 사용한다. (첫번째 refactoring)

• action.type을 쓸 때 string형으로 하면 실수를 할 수 있으므로 string을 keep해주는 const를 만든다.(두번째 refactoring)
• string 대신 constant(variable)을 쓴다. 에러를 찾을 때 훨씬 수월해진다.

📌노마드코더의 '초보자를 위한 리덕스'수업을 듣고 쓴 글입니다.