action creator란?

액션 생성함수는, 액션을 만드는 함수이다.

단순히 파라미터를 받아와서 액션 객체 형태로 만들어준다..

왜 Action creator를 사용해야 하나?

1. 휴먼에러 (오타) 방지
   액션객체의 type value를 상수로 만들어놓았기 때문에, 개발툴에서 자동완성등의 보조 기능을 지원받을 수 있습니다. 그래서 의도치 않은 휴먼에러(오타)를 없앨 수 있다.
2. 유지보수의 효율성 증가
   우리가 만든 Action Creator가 만약 100군데에서 쓰이고 있는 상태에서 혹여나 그것을 바꾸어야 하는 상황이 오더라도 단 한번의 수정으로 100군데에 모든 수정사항을 반영할 수 있습니다.
3. 코드 가독성
   모듈 파일에서 Action Creator가 일목요연하게 정리가 되어있으면, 내가 아닌 다른 개발자가 보았을 때 해당 모듈이 가지고 있는 모든 Action들을 한눈에 알 수 있게 됩니다.

예를 들어

우리가 액션객체의 value를 변경할 일이 생긴다면 어떨까?

하나하나식 찾아가면서 바꿔주면 되겠지 라고 생각하지만

프로젝트 규모가 굉장히 커서 100군데라면 어떨까?

이럴때 action creator를 쓰면된다.

// src/modules/counter.js

const PLUS_ONE = "PLUS_ONE";
const MINUS_ONE = "MINUS_ONE";


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: 
      return {
        number: state.number + 1,
      };
    case MINUS_ONE:
      return {
        number: state.number - 1,
      };
    default:
      return state;
  }
};


export default counter;

여기서 이부분이 action creator이다.

export const plusOne = () => {
  return {
    type: PLUS_ONE,
  };
};

plusOne이라는 함수가

return {
type: PLUS_ONE, <- 여기 action객체에 반환해주고있다.

const PLUS_ONE = "PLUS_ONE";
const MINUS_ONE = "MINUS_ONE"; <-이것들은 상수로 값을주는 action벨류들이 있다.

그리고 그 action벨류를 사용해서 타입을 이용해서 상수를 반환하는 곳이

type: PLUS_ONE <-여기있다.

그리고

// src/App.js

import React from "react";
import { useSelector, useDispatch } from "react-redux"; // import 해주세요.
import { plusOne, minusOne } from "./redux/modules/counter"; // import 해주세요.

const App = () => {
  const dispatch = useDispatch(); // dispatch를 사용할 수 있게 해주세요.
  const number = useSelector((state) => state.counter.number); // useSelector를 사용해 number를 가져와주세요.
  console.log(number);
  return (
    <div>
      {number}
      <button
        onClick={() => {
          dispatch(plusOne()); // dispatch를 사용해 액션을 발생시켜주세요.
        }}
      >
        +1
      </button>
      <button
        onClick={() => {
          dispatch(minusOne()); // dispatch를 사용해 액션을 발생시켜주세요.
        }}
      >
        -1
      </button>
    </div>
  );
};

export default App;

이렇게

import { plusOne, minusOne } from "./redux/modules/counter"; 를 해준다음

onClick={() => {
dispatch(plusOne()); 라고 상수를 불러와주면 된다.