[TIL] Action Creators

• Action Values : action 객체에서 type의 value를 상수로 만든 것
• Action Creators : action 객체를 생성하는 함수

Action Values

// action value : action의 type을 상수화
const PLUS = "counter/PLUS";
const MINUS = "counter/MINUS";
const RESET = "counter/RESET";

Action Creators

// action creator : action 객체를 리턴하는 함수
export const plus = (payload) => {
  return { type: PLUS, payload };
};
export const minus = (payload) => {
  return { type: MINUS, payload };
};
export const reset = () => {
  return { type: RESET };
};

// Action creator 이렇게 호출
<button
  onClick={() => {
    dispatch(plus(num));
  }}
  >
  ➕
</button>
<button
  onClick={() => {
    dispatch(minus(num));
  }}
  >
  ➖
</button>
<button onClick={() => dispatch(reset())}>reset</button>

Action Creator를 사용해야 하는 이유

• 의도치 않은 휴먼 에러 방지
  • action 객체 type의 value를 상수로 만들어 놓았기 때문에 자동완성 등의 보조 기능을 지원 받아 오타를 방지할 수 있고, 에러가 나도 오타에 의한 에러임을 파악할 수 있다. (문자열인 경우 어디서 틀렸는지 확인하기 어려움)
• 유지보수의 효율성 증가
  • action 객체에 대해 수정 사항이 있어도 여러 곳을 다 바꿀 필요 없이 action creator 함수만 수정하면 모든 수정사항을 반영할 수 있다.
• 코드 가독성
  • 하나의 reducer 파일에 action creator가 정리되어 있으면 다른 사람이 보아도 해당 reducer가 가지고 있는 모든 action들을 한 눈에 파악하기 쉽다.

Duck 패턴

1. reducer 함수를 export default 한다.
2. action creator 함수들을 export 한다.
3. action type은 app/reducer/ACTION_TYPE 형태로 작성한다.

👉 하나의 모듈 파일에 Action type, Action Creator, Reducer가 모두 존재하는 방식