[React 숙련] 1주차_Action Creator

오늘의 학습내용 :  Action Creator

 

◆ Action

 

Redux에서 Action은 영단어의 본뜻과 마찬가지로 행동(동작)을 말한다. 정확히는 상태에 영향을 미치는 어떤 행동인데, 스토어에 저장된 데이터에 변화를 주기 위함이다. Action은 자바스크립트 객체 형태로 존재하며, type이라는 필드를 반드시 포함한다.

 

{
    type: 'ADD_TODO',
    text: '내배캠 강의 복습하기'
}

 

개발자는 type 필드를 통해 해당 Action이 정의할 수 있고, 객체에 포함된 부가적인 데이터를 통해 Action을 처리하게 된다. 애플리케이션의 규모가 클수록 객체는 훨씬 더 많은 데이터를 포함하게 되고, 디버깅할 때 redux-devtools 등의 도구를 이용해서 각 Action을 살펴보아야 한다. 

 

 

◆ Action Creator

 

Action Creator는 Action을 생성하는 역할을 하는 자바스크립트 함수이다. Action Creator 함수에 Action 생성에 필요한 데이터를 파라미터로 넣어서 호출함으로써 객체를 생성할 수 있다. 어려울 때는 자바스크립트 함수와 객체에 대해 생각해 보자.

 

Action과 Action Creator의 관계 (출처: https://www.frontoverflow.com/)

 

function addTodo(text) {
    return {
        type: 'ADD_TODO',
        text: text,
    }
}
// addTodo 함수의 파라미터로 text를 받고, ADD_TODO type의 자바스크립트 객체를 반환한다.

 

Action Creator를 사용하는 이유는 다양하다.

• 휴먼에러 방지
• 유지보수 효율 증가
• 코드의 가독성 증가

Action 객체의 type value가 상수이기 때문에 Action Creator에서 자동완성과 같은 보조기능을 적극적으로 활용할 수 있고, 개발하면서 발생하는 오타를 예방하기에 좋다. 또한 규모가 큰 애플리케이션에서 한 번의 수정으로 해당 Action이 사용된 모든 코드에 변경된 부분을 반영할 수 있다. 이렇게 Action Creator가 잘 정리되어 있기 때문에 협업할 때에도 각 모듈에 있는 Action들을 쉽게 알아볼 수 있고, 코드의 가독성도 높아진다.

 

// 모듈에서 Action Creator 만들어 보기

// 액션 value를 상수로 만든다.
const PLUS_ONE = "PLUS_ONE";
const MINUS_ONE = "MINUS_ONE";

// Action Creator를 만든다.
export const plusOne = () => {
  return {
    type: PLUS_ONE,
  };
};

export const minusOne = () => {
  return {
    type: MINUS_ONE,
  };
};

// 초기 상태값
const initialState = {
  number: 0,
};

// Reducer
const counter = (state = initialState, action) => {
  switch (action.type) {
    case PLUS_ONE:
      return {
        number: state.number + 1,
      };
    case MINUS_ONE:
      return {
        number: state.number - 1,
      };
    default:
      return state;
  }
};

export default counter;