[React] Action Creator

• 액션 객체의 value를 변경할 일이 생긴다면? 프로젝트 규모가 커진다면 일일이 변경이 힘들어짐.

  // src/App.js
  
  import React from "react";
  import { useDispatch, useSelector } from "react-redux";
  
  const App = () => {
    const dispatch = useDispatch();
    const number = useSelector((state) => state.counter.number);
  
    return (
      <div>
        {number}
        <button
          onClick={() => {
            dispatch({ type: "PLUS_ONE" }); // counter/PLUS_ONE로 변경
          }}
        >
          + 1
        </button>
        <button
          onClick={() => {
  					// 액션객체 디스패치
            dispatch({ type: "MINUS_ONE" }); // counter/MINUS_ONE로 변경
          }}
        >
          - 1
        </button>
      </div>
    );
  };
  
  export default App;

  // src/modules/counter.js
  
  // 초기 상태값
  const initialState = {
    number: 0,
  };
  
  // 리듀서
  const counter = (state = initialState, action) => {
    switch (action.type) {
      case "PLUS_ONE": // counter/PLUS_ONE로 변경
        return {
          number: state.number + 1,
        };
  
  		// action.type이 MINUS_ONE 일 때 새로운 state 반환
      case "MINUS_ONE": // counter/MINUS_ONE로 변경
        return {
          number: state.number - 1,
        };
      default:
        return state;
    }
  };
  
  // 모듈파일에서는 리듀서를 export default 한다.
  export default counter;

• 액션 객체를 한 곳에서 관리할 수 있도록 “함수”와 액션 value를 상수로 만들어 줌.
• Action Creator. 해석 그대로 액션을 만드는 생성자.

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

• 모듈에 initialState와 리듀서 밖에 없었지만 액션의 value와 Action Creator가 추가됨.

  // 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;

• 1. export된 Action Creator import 하기.

• 2. dispatch()에 있던 액션 객체를 지우고 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로 변경합니다.
             }}
           >
             + 1
           </button>
           {/* 빼기 버튼 추가 */}
           <button
             onClick={() => {
               dispatch(minusOne()); // 액션객체를 Action creator로 변경합니다.
             }}
           >
             - 1
           </button>
         </div>
       );
     };
     
     export default App;

     Q.  dispatch()안에는 반드시 객체만 들어가야 한다고 알고 있는데, 어떻게 함수가 들어갈 수 있을까요?
     
     A. {type: “PLUS_ONE”} === plusOne()  는 같은 값입니다. 
     **함수를 실행한 것은 함수의 return 값과 같습니다. 다시 말해,** 
     const one = () => {return 1; } 로 함수를 만들었을 때 one() === 1 입니다. 

왜 Action Creator를 사용하는지?

1. 휴먼에러(오타) 방지 : 액션 객체의 type value를 상수로 만들어 놓아 자동 완성 등의 보조 기능을 지원 받을 수 있음.
2. 유지보수의 효율성 증가 : 단 한 번의 수정으로 모든 수정 사항 반영.
3. 코드 가독성.
4. 리덕스 공식문서에서 소개되고 있는 방법.

정리

• 액션 객체를 만드는 함수를 Action Creator라고함.
• Action Creator는 모듈 파일 내에서 생성됨.
• 액션 객체의 type value로 상수로 생성해서 관리함.
• Action Creator를 사용하면, 여러 가지 문제점 해소 가능.