[ React + redux 03 ] 애플리케이션 상태관리 - 액션생성

액션 생성

드디어 리덕스 관련 작업을 할 차례이다. 이제 액션을 정의해보겠다.

복습을 해보자면 액션은 객체라 한적이 있다. 그리고 모든 액션 객체에는 type 값이 필수로 있어야 한다고 했엇다.

{
  type: "INCREMENT"
}

{
  type: "DECREMENT"
}

액션과 함께 전달해야 할 값이 있을 때는 다음과 같이 새로운 키를 추가해서 만들어 주면된다.

{
  type: "SET_COLOR",
  color: "black"
}

type은 액션 이름과도 같다. 나중에 리듀서가 액션을 전달받으면 이 값에 따라서 해야할 작업을 결정한다.

그런데 이 값을 사용 할때마다  직접 문자열을 입력해서 사용한다면 관리하기가 조금 힘들 수도 있기 때문에,

이들 값은 따로 파일로 만들어서 저장하면 관리하기가 편하다.

1. ActionTypes 준비

우선 action 디렉터리에 ActionTypes.js라는 파일을 만들어서 아래와 같은 상수들을 선언하자.

// Action의 종류들을 선언한다.
// 앞에 export를 붙이면 나중에 이것들을 불러올 때,
// import * as types from './ActionTypes'를 할 수 있다.

export const INCREMENT = 'INCREMENT';
export const DECREMENT = 'DECREMENT';
export const SET_COLOR = 'SET_COLOR';

export const를 이용하여 상수를 선언하고 곧바로 내보냈다. 액션을 선언할 때는 이처럼 대문자로 선언하면 된다.

2. 액션 생성 함수 만들기

액션을 만들 때마다 객체를 바로 생성하기는 번거로우므로 액션을 만들어 내는 함수를 만들어 보겠다.

이 함수를 액션 생성 함수라 한적이 있다. actions 디렉터리에 index.js 파일을 만들어 아래코드를 입력해보자.

// action 객체를 만드는 액션 생성 함수들을 선언한다. (action creators).
// 여기에서 () => ({})는 function() { return { } }와 동일한 의미이다.

import * as tpyes from './ActionTypes';

export const increment = () => ({
    type: tpyes.INCREMENT
});

export const decrement = () => ({
    type: tpyes.DECREMENT
});

export const setCOlor = (color) => ({
    type: tpyes.SET_COLOR,
    color
});

increment 와 decrement 는 수치를 1씩 더하고 빼는 액션을 만들어 내므로 따로 필요한 값이 없다.

객체 내부에는 type 값만 존재한다. 하지만 setColor 는 색상을 지정하는 액션이기 때문에 파라미터로 color 를 받고, 이 값을 객체 안에 넣었다.

액션을 다 만들었으니, 다음 번에는 리듀서를 만들어 보자.