Redux part-3 / Action Creator

Action Creator

 

Action Creator란?

 

만약 우리가 액션객체의 value를 변경할 일이 있다고 가정해보자.

이를 수동으로 일일히 바꿔주게 된다면 어떨까.

하면 되지 라고 생각한다면, 수정해주어야 할 부분이 100군데라도 그렇게 생각할 수 있을까.

이를 해결해 주는 것이 Action Creator이다.

 

Action Creator 만들기

 

// src/redux/modules/counter.js

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

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

만약 PLUS_ONE 이라는 액션 객체를 만드는 함수를 만든다면 위와 같이 만들 수 있다.

그리고 우리는 이것을 Action Creator라고 부른다. 해석 그대로 액션을 만드는 생성자 인것이다.

액션의 value는 상수로 따로 만들어주고, 그리고 그것을 이용해서 액션객체를 반환하는 함수를 작성한다.

 

리듀서 전체 코드를 살펴보자.

// src/modules/counter.js

// 추가된 코드 👇 - 액션 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,
};

// 리듀서
const counter = (state = initialState, action) => {
  switch (action.type) {
    case PLUS_ONE: // case에서도 문자열이 아닌, 위에서 선언한 상수를 넣어줍니다. 
      return {
        number: state.number + 1,
      };
    case MINUS_ONE: // case에서도 문자열이 아닌, 위에서 선언한 상수를 넣어줍니다. 
      return {
        number: state.number - 1,
      };
    default:
      return state;
  }
};


export default counter;

모듈에 initialState와 리듀서밖에 없었지만, 액션의 value와 Action Cretor가 추가되었다.

 

Action Creator 사용하기

 

// src/App.js

import React from "react";
import { useDispatch, useSelector } from "react-redux";

// 사용할 Action creator를 import 합니다.
import { minusOne, plusOne } from "./redux/modules/counter";

const App = () => {
  const dispatch = useDispatch();
  const number = useSelector((state) => state.counter.number);

  return (
    <div>
      {number}
      <button
        onClick={() => {
          dispatch(plusOne()); /* 액션객체를 Action creator로 변경합니다.
          이전에는 => dispatch({ type: "PLUS_ONE" });
          */
        }}
      >
        + 1
      </button>
      {/* 빼기 버튼 추가 */}
      <button
        onClick={() => {
          dispatch(minusOne()); // 액션객체를 Action creator로 변경합니다.
        }}
      >
        - 1
      </button>
    </div>
  );
};

export default App;

전과 비교해 무엇이 달라졌는지 살펴보자.

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

 

++dispatch() 안에는 반드시 객체만 들어가야 한다고 알고 있는데, 함수가 들어갈수 있는 이유는?

 

함수의 실행값은 안에 들어있는 그 자체의 값과 같다. 

즉 위 코드에서 함수의 실행값은 이전에 기입했던 객체형태와 같으므로 가능한 것.

 

Action Creator를 사용하는 이유

 

1. 액션객체의 type value를 상수로 만들어놓았기 때문에 자동완성 기능을 보조받을 수 있다.
2. 유지보수 효율성이 증가한다. (단 한번의 수정으로 모든 부분을 수정 가능하기 때문)
3. 코드 가독성 증가 - 모듈 파일에서 Action Creator가 일목요연하게 정리되어 있으면 해당 모듈이 가지고 있는 Action들을 한눈에 알 수 있게 된다.

 

정리

• 액션객체를 만드는 함수를 Action Creator(액션 크리에이터)라고 한다.
• Action Creator는 모듈 파일안에서 생성된다.
• 액션객체의 type value로 상수로 생성해서 관리한다.
• Action Creator를 사용하면, 여러가지 문제점을 해소할 수 있다.