4. Action

: 작업에 대한 정보를 지니고 있는 객체

필요한 액션은?

  1. 값을 증가 시키기 (+1) : INCREMENT
  2. 값을 감소 시키기 (-1) : DECREMENT
  3. 새로운 색상 설정하기 : SET_COLOR

actions / ActionTypes.js 생성

  • action 이름을 상수 형태로 만들어고 다른 파일에서 불러와서 사용 할 수 있도록 내보낸다
  • action 객체이다
  • type종류에 따라서 redux가 일을 한다.
  • action이 생성될 때마다 객체를 생성하는 건 귀찮은 일이다. action 생성자 함수 이용
// action 형태
{ type: "INCREMENT" } // 이 부분에서는 action에서 추가적인 정보가 필요가 없다
{ type: "DECREMENT" } // 이 부분에서는 action에서 추가적인 정보가 필요가 없다
{ type: "SET_COLOR",
  color: [200,200,200] // 색상을 새로운 값을 설정이 필요. color:[200,200,200] 배열로 RGB 표현
}

// ActionTypes.js
export const INCREMENT = "INCREMENT";
export const DECREMENT = "DECREMENT";
export const SET_COLOR = "SET_COLOR";

Action 생성자 함수 actions / index.js 생성

  • 파일이름이 index.js 이유는 actions 디렉토리만 불러왔을 때, 자동으로 로드 되기 위함.
  • ActionTypes.js에 export만 있는 경우에는 export default가 없다. 아래 코드처럼 불러오면 된다.
// index.js
// 방법1.
import { INCREMENT, DECREMENT, SET_COLOR } from './ActionTypes';

// 방법2. 좀 더 쉬운 방법 : 각 상수에 접근이 가능다.
import * as types from './ActionTypes';

export function increment() {
    return {
        type: type.INCREMENT
    };
}

export function decrement() {
    return {
        type: type.DECREMENT
    };
}

export function setColor(color) {
    return {
        type: type.SET_COLOR,
        color
    };
}

code & view