[Redux] 리덕스를 구성하는 5개의 핵심 Action, Reducer, Store, Dispatch, Subscribe

오늘은 리덕스의 핵심 멤버인 5형제를 알아보자.

• Action
• Reducer
• Store
• Dispatch
• Subscribe

얘들을 알아볼 것인데 일단 오늘 가장 중요한 것은 흐름을 알아야한다.

 

다른 예제들과 다르게 이번 글에 나오는 소스코드는 본인이 직접 타이핑 하는 것을 권장하지 않는다.

 

그냥 흐름만 이해하는데 온 힘을 쏟을것을 추천한다.

Redux

우리는 지난 시간 왜 리덕스를 알아야하는지와 리덕스는 어떤 특징을 갖고 있는지 알아보았다.

 

오늘 시간에는 리덕스를 구성해는 핵심 5형제에 대해서 알아볼 것이다.

 

• Action
• Reducer
• Store
• Dispatch
• Subscribe

 

얘들이 다음과 같은 구조를 띄게 된다.

 

이 그림을 잘 보고 하나 하나 따라가보자.

 

우선 시작하기 전에 리덕스를 패키지로 설치를 해야한다.

$ npm install redux
$ npx i redux
$ yarn add redux

각각 패키지 관리자에 맞게 설치해주고 시작하자.

Store

리덕스 패키지를 설치하면 우리는 리덕스에서 createStore라는 함수를 사용할 수 있다.

 

import { createStore } from "redux";

이 createStore는 함수로 데이터를 넣어주는 저장소의 역할을 수행한다.

 

우리 앱에서 데이터라고 한다면 보통 State를 데이터라고 하는데, 정확히 State가 뭔지 한 번 이야기 해보자.

State는 Modified되는 Data 이다.

어떤 값이 변하면 그 값에 따라 사용자에게 보여지는 부분이 달라 지게 하는게 리액트에서의 State였으면 Redux의 State 도 똑같다.

 

만약에 우리가 카운터 앱을 만든다고 치면 올라가는 숫자가 state가 되는 거다.

 

이런 state를 store에 집어 넣는 것이다.

 

그리고 그걸 가능하게 하는 것이 바로 createState이고.

 

하지만 여기서 store에 createStore state를 넣는 것이 아니라 state를 변경시키는 함수를 넣어야 한다.

 

그 함수가 바로 reducer가 되는 것이다.

const reducer = () => {};

const store = createStore(reducer);

그리고 이런 store를 콘솔로 출력하면 4가지의 함수가 나온다.

const reducer = () => {};

const store = createStore(reducer);

console.log(store);

>>> dispatch, subscribe, getState, replaceReducer

여기서 replaceReducer는 잠깐 제쳐두고 앞의 3개를 집중해보자.

 

• dispatch : 뒤에 나올 dispatch로 잠깐 이야기 하자면 action을 발생시켜 state를 변하게 만드는 장본인
• subscribe : state 값이 변하는지 감시하는 cctv 격
• getState : state를 얻을 수 있게 하는 getter 함수

그럼 우리는 리덕스의 store를 만들었다.

reducer

reducer는 앞서 말 했던 것 처럼 함수이다.

어떤 함수일까?

바로 데이터를 수정하는 함수이다.

위에서 우리가 데이터와 state를 분리해서 생각했는데, data보다 더 구체적인 것이 state이라고 했다.

 

state는 변하는 데이터를 뜻하고 이 reducer 함수는 바로 state를 변경시키는 함수이다.

이 함수가 return 하는 값이 바로 state가 되는 것이다.

 

만약 내가 리듀서 함수에 반환으로 "Hello"라는 스트링을 준다면 store에 있는 state는 Hello가 된다.

const reducer = () => {
    return "hello";
}

const store = createStore(reducer);

console.log(store.getState());

>>> hello

혹은

const reducer = (state = 0) => {
    return state;
}
const store = createStore(reducer);
console.log(store.getState());

>>> 0

이렇게도 사용할 수 있는데, 여기서 우리는 어떻게 reducer를 사용하냐?

 

1. reducer에게 인자를 넘긴다.
2. reducer는 인자를 받고 어떤 로직을 실행시킬지 결정한다.
3. 해당 로직을 수행한 결과로 state를 반환한다.
4. 반환된 state는 우리의 새로운 state가 된다.

여기서 말하는 인자는 바로 Action이다.

Action

만약 우리가 카운팅하는 앱을 만든다고 하면 reducer에서 state + 1이나 state - 1을 수행해야 되는데, 얘들을 어떻게 구분할까?

 

바로 Action으로 구분한다.

const reducer = (state, action) => {
    return state;
}

const store = createStore(reducer);

reducer의 두 번째 인자로 Action이 들어가는데, 이 Action은 우리가 reducer와 소통하는 매개체이다.

 

reducer에게 어떤 일을 할지 Action으로 대화하는거고 reducer는 action에 따라서 return해주는거다.

 

그럼 이 action을 어떻게 전달해주냐고?

 

바로 Dispatch이다.

Dispatch

앞에서 우리가 store를 콘솔로 출력하면 dispatch가 나오는것을 확인 했을 것이다.

 

그 dispatch를 이용해서 우리는 action을 전달한다. store.dispatch() 의 매개변수에 어떤 Action인지 객체 형태로 보내준다.

const reducer = (state, action) => {
  return state;
}
const store = createStore(reducer);

store.dispatch({type: "ADD"})

그리고 여기서 조건을 조금 추가해보자면

const reducer = (state = 0, action) => {
  if(action.type === "ADD") { return state + 1;}
  else return state;
}
const store = createStore(reducer);

store.dispatch({type: "ADD"});
store.dispatch({type: "ADD"});
store.dispatch({type: "ADD"});
store.dispatch({type: "ADD"});

console.log(store.getState());

>>> 4

가 된다.

 

내가 ADD라는 Action을 갖는 dispatch를 총 4번 호출했기 때문에 4가 출력되는 것이다.

Subscribe

Subscribe는 변화를 감지한다.

 

Dispatch를 통해서 Reducer의 state를 변경시킬 때 마다 Subscribe는 움찔움찔하는데, 그 움찔움찔을 통해서 우리는 변화를 감지한다.

 

Subscribe 역시 매개변수로 함수가 들어가게 되는데, 그 함수는 변화가 있을 때 어떤 행동을 할지에 대한 함수이다.

 

만약 내가

const reducer = (state = 0, action) => {
  if(action.type === "ADD") state + 1;
  return state;
}
const store = createStore(reducer);

store.dispatch({type: "ADD"})

const onChange() => {
  console.log("changed");
}

store.subscribe(onChnage);

이렇게 주면

const reducer = (state = 0, action) => {
  if(action.type === "ADD") state + 1;
  return state;
}
const store = createStore(reducer);

const onChange() => {
  console.log("changed");
}

store.subscribe(onChnage);

store.dispatch({type: "ADD"})
store.dispatch({type: "ADD"})
store.dispatch({type: "ADD"})
store.dispatch({type: "ADD"})
store.dispatch({type: "ADD"})

>>> changed
>>> changed
>>> changed
>>> changed
>>> changed

변화가 감지될 때 마다 subscribe가 호출된다.

---

자 이렇게 오늘은 Redux의 핵심 컨셉과 5형제에 대해서 알아보았다.

 

사실 다른 글은 직접 타이핑 하는 것을 추천하지만 이번 글은 그냥 따라오는 것을 추천한다.

 

만약 당신이 리덕스에 대해서 처음 알게 되었다면 타자를 치느라 핵심을 놓칠것이 두려워서이다.

 

내 블로그만 보고 공부를 하는 사람은 없겠지만 노파심에 말 하자면 다른 블로그도 충분히 봐야한다.

 

공식 문서라면 더 좋고.