[ React redux 02 ] 액션과 액션 생성함수

01. 액션과 액션 생성함수

액션은 스토어에서 상태 변화를 일으킬 때 참조하는 객체이다. 이 객체는 type 값을 반드시 가지고 있어야 한다.

액션 타입은 해당 액션이 어떤 작업을 하는 액션인지 정의하며, 대문자와 밑줄을 조합하여 만든다.

{
  type: "INCREMENT"
}

이 액션은 상태에 있는 값의 수치를 올린다. 이 값을 어떻게 업데이트 할지는 나중에 리듀서라는 함수에서 정의한다.

지금은 우선 액션을 이해하는데 집중해보자.

액션 객체 안에서 type 값은 필수고, 나머지는 선택이다. 즉, 있어도 되고 없어도 되며 형식도 자유다.

예를 들자면 아래와 같이 작성 가능하다.

{
  type: "INCREMENT_NUMBER"
  text: "리덕스 깨부시기"
}

또한 아래와 같이 객체 형태로 넣을 수도 있다.

{
  type: "INCREMENT_NUMBER"
  detail : {
    id:1,
    text: "리덕스 깨부시기",
    done: false
  }
}

액션에서 type 값은 고정이지만, 나머지 값들은 유동적이다. 액션을 새로 만들 때마다  직접 객체를 만들어 준다면 액션 형식을 모두 꿰고 있어야 하므로 불편하다.

그래서 보통 액션을 만들어주는 함수를 사용한다. 이를 액션 생성 함수(action creator) 라고한다.

액션 생성 함수를 정의하려면 우선 액션 타입을 상수 값으로 정의해 주어야 한다.

이전 강에서 이용한  JSBin(https://jsbin.com)을 이용하여, 숫자의 값을 더하고 빼는 카운터를 만들것이다. 

이를 위해 INCREMENT와 DECREMENT액션을 만들어 보자.

const INCREMENT = "INCREMENT";
const DECREMENT = "DECREMENT";

INCREMENT는 값을 더하는 액션이고, DECREMENT는 값을 빼는 액션이다.

이것에 맞추어 액션 생성함수도 만들어보자.

const INCREMENT = "INCREMENT";
const DECREMENT = "DECREMENT";

const increment = () => ({
  type: INCREMENT
});
const decrement = () => ({
  type: DECREMENT
});

액션 객체에 type 외의 값이 없다면 위와 같이 정의 하면 된다. 하지만 유동적인 값이 들어가야 한다면 아래와 같이

파라미터를 넣어서 액션을 만든다.

const INCREMENT = "INCREMENT";
const DECREMENT = "DECREMENT";

const increment = (diff) => ({
  type: INCREMENT,
  diff: diff
});
const decrement = (diff) => ({
  type: DECREMENT,
  diff: diff
});

액션을 제대로 만들었는지 콘솔에 기록해 보자. JavaScript 맨 아래쪽에 다음 코드를 입력하자

//...
console.log(increment(1));
console.log(decrement(1));

Run 버튼을 눌러서 액션 객체를 잘 기록하는지 확인해보자.

위 사진과같이 기록이 잘 된다면 방금입력한 console.log 두줄을 지우도록 하자.

이 글은 Velopert님의 책을 실습하며 공부한 자료입니다.