Action Creator

만약 우리가 저번에 작성했던 action type들의 value를 변경하려면 어떡할까요?

PLUS_ONE, MINUS_ONE이라는 밸류대신 이 액션객체가 counter 모듈안에있다는 것을 강조하기위해

counter/PLUS_ONE, counter/MINUS_ONE이라는 value로 각각 바꾸고 싶다면?

리듀서, App.js의 dispatch부분 총 4곳을 변경해야합니다. 그런데 4군데가 아닌 100군데를 변경해야한다면?

곤란할 겁니다.

 

// 추가된 코드 👇 - 액션 value를 상수들로 만들어 줍니다. 보통 이렇게 한곳에 모여있습니다.
const PLUS_ONE = "PLUS_ONE";
const MINUS_ONE = "MINUS_ONE";


// 추가된 코드 👇 - Action Creator를 만들어 줍니다. 
//export가 붙는 이유는 plusOne함수를 밖에서도 사용할 것이기 때문입니다.
export const plusOne = () => {
  return {
    type: PLUS_ONE,	//type은 위에서 생성한 상수 사용. (vs코드에서 자동완성 지원)
  };
};

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

그래서 직접 하드코딩하는 것이 아닌, 액션객체를 한 곳에서 관리할 수 있도록 함수와 액션value를 상수로 만들겁니다.

 

이렇게 만든 Action Creator을 우리가 사용하는 곳에 import해주어야 합니다.

즉, 태생적으로 counter.js밖에서 사용될 함수이기에 export가 붙은 것입니다.

 

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

저번에 작성했던 dispatch안에있던 type객체를 제거하고 Action Creator로 변경합니다.

 

 

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

 

 

왜 Action Creator을 사용해야 하나?

1) 휴먼에러(오타)방지

  액션객체의 type value를 상수로 만들어놓았기 때문에, 개발툴에서 ㅈ자동완성등의 보조기능을 지원받을수 있어 의도치않은 오타를 방지할 수 있다.

 

2) 유지보수의 효율성 증가

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

 

3) 코드 가독성

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

 

4) 공식문서에 따르면 Action Creator을 스토어 인스턴스에 즉시 바인딩하면 서버에서 렌더링해야하는 범용앱에서는

    제대로 작동하지 않다고 합니다.