#TIL 38일차(Redux[3])

앙꼬·2024년 6월 25일

부트캠프

목록 보기

37/59

Action Creator란?

Redux에서 액션을 생성하는 생성자 함수

액션은 상태를 변화시키기 위한 의도를 담은 객체로, 액션 생성 함수는 이러한 액션 객체를 쉽게 만들 수 있게 도와준다.
일반적으로 액션 객체는 type 속성과 선택적으로 payload 속성을 포함한다.

Action Creator를 사용해야 하는 이유

📍 휴먼에러 (오타) 방지

액션객체의 type value를 상수로 만들어놓았기 때문에 개발툴에서 자동완성등의 보조 기능을 지원받을 수 있다 → 즉 의도치 않은 휴먼에러(오타)를 없앨 수 있다

📍 유지보수의 효율성 증가

만약 만들어둔 Action Creator가 만약 100군데에서 쓰이고 있는 상태에서 혹여나 그것을 바꾸어야 하는 상황이 오더라도, 단 한번의 수정으로 100군데에 모든 수정사항을 반영할 수 있다.

📍 코드 가독성

모듈 파일에서 Action Creator가 일목요연하게 정리가 되어있으면, 내가 아닌 다른 개발자가 보았을 때 해당 모듈이 가지고 있는 모든 Action들을 한눈에 알 수 있게 된다. 즉 그 자체가 Action 들의 리스트업을 해주는 역할을 갖게 되는 것이다

payload란?

액션 객체에서 상태 변화를 일으키는 데 필요한 데이터를 담는 속성

액션 객체는 type 속성과 payload 속성을 가지는데, type은 액션의 종류를 나타내고 payload는 해당 action이 처리할 데이터를 포함한다.
action을 통해 전달되는 정보이며, 이 정보를 바탕으로 reducer에서 상태를 변경한다.

📍 꼭 payload라는 이름을 통해서 보내야하나요?

답은 X
→ 데이터를 payload property에 담아주는 이유는 “커뮤니티 best practice” 로 공유되면서 많은 개발자가 데이터는 payload라는 프로퍼티에 담아주고 있기 때문❗️
→ 즉 커뮤니티 컨벤션이기 때문에 개발하는 과정에서 개발자의 취향과 상황에 따라 변경할 수 있음

Action Creator와 payload가 사용된 예시코드

src/redux/modules/todo.js

// Action 타입 정의
const ADD_TODO = 'ADD_TODO';

// Action Creator 함수(= 액션객체를 반환하는 함수) 
export function addTodo(text) {
  return {
    type: ADD_TODO,
    payload: text
  };
}