TIL29-03 Redux - Refactoring(action creators, action values), Payload

1. Action Creator

• 만약에 우리가 액션객체의 value를 변경할 일이 생긴다면 각각 바꿔야한다. 프로젝트 규모가 굉장히 커서 변경할 것이 많다면 문제를 야기할 수 있다. 그렇기 때문에 Action Creator를 사용한다.
  (1) Action Creator 만들기
• 액션객체를 한 곳에서 관리할 수 있도록 “함수"와 액션 value를 상수로 만든다.

// src/redux/modules/counter.js

const PLUS_ONE = "PLUS_ONE"; // value는 상수로 생성

// 액션객체를 반환하는 함수 생성
// export 가 붙는 이유는 plusOne()는 밖으로 나가서 사용되기 때문이다.
export const plusOne = () => { 
  return {
    type: PLUS_ONE, // type에는 위에서 만든 상수로 사용 (vscode에서 자동완성 지원)
  };
};

(2) Action Creator 사용하기
1. export된 Action Creator import 하기
2. dispatch()에 있던 액션객체를 지우고, Action creator 넣기

2. Action Creator를 사용하는 이유

• 휴먼에러 (오타) 방지
  액션객체의 type value를 상수로 만들어놓았기 때문에, 개발툴에서 자동완성등의 보조 기능을 지원받을 수 있다. 그래서 의도치 않은 휴먼에러(오타)를 없앨 수 있다.
• 유지보수의 효율성 증가
  우리가 만든 Action Creator가 만약 100군데에서 쓰이고 있는 상태에서 혹여나 그것을 바꾸어야 하는 상황이 오더라도 단 한번의 수정으로 100군데에 모든 수정사항을 반영할 수 있다.
• 코드 가독성
  모듈 파일에서 Action Creator가 일목요연하게 정리가 되어있으면, 내가 아닌 다른 개발자가 보았을 때 해당 모듈이 가지고 있는 모든 Action들을 한눈에 알 수 있게 된다. 즉 그 자체가 Action 들의 리스트업을 해주는 역할을 갖게 되는 것이다.
  

3. Payload

• 리듀서로 보내는 액션객체에 어떤 정보를 같이 담아보내고자 한다면 payload를 이용한다.
• payload는 Action Creator를 생성할 때 매개변수에 자리에서 받을 준비를 하고, 반환하는 액션객체에 payload라는 key와 받은 매개변수를 value로 하여 구현한다.
• 리듀서에서 payload를 사용하고자 할 때는 action.payload로 사용할 수 있다.

4. payload를 이용해서 기능 구현하기

• 1) payload를 이용해서 기능 구현 작업 순서
  1. 사용자가 입력한 값을 받을 input 구현하기
  2. Action Creator 작성하기
  3. 리듀서 작성하기
  4. 구현된 기능 테스트 하기
• 2) 모듈 작성: Action Creator
  모듈을 만들 때, 빈 페이지에 만들어야 할 것을 리스트업 하고 작성한다. 구성요소가 많으니 빼먹지 않기 위함이다.

// src/redux/modules/counter.js

// Action Value

// Action Creator

// Initial State

// Reducer

// export default reducer