React - Redux(Action Creator)

Action Creator

이전 사례에서 액션객체의 type을 문자열인 "PLUS_ONE"이라는 형태로 검증하였다. 하지만 이러한 형태의 액션객체를 리듀서에 전달하는 컴포넌트가 무한정 늘어난다고 한다면 코드에서 수정해주어야하는 부분도 무한정 늘어나게 된다.

그래서 이렇게 하드코딩을 하지 않기 위해서 액션객체를 한 곳에서 관리할 수 있도록 함수와 액션객체의 value를 상수로 만들 필요가 있다. 이 경우 "PLUS_ONE"이라는 액션객체를 만드는 함수를 만든다면 아래와 같이 만들 수 있다. 그리고 이렇게 만드는 것을 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에서 자동완성 지원)
  };
};

이렇게 counter.js에서 선언하고 export해주면 App.js에서 import해서 활용할 수 있다. "plusOne"이라는 함수는 실행을 시키면 type이 PLUS_ONE인 객체를 반환하기 때문에 함수실행결과값을 App.js에서 활용하게 된다.

Action Creator 사용하기

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