1.5 Actions 만들기

ActionTypes 준비하기

이제 드디어 Redux 스러운것을 할 차례입니다. 우리가 이제 액션을 정의할건데요, 우선 리뷰를 해보자면, action 은 하나의 객체라고 했었죠? 모든 액션 객체는 type 이라는 값을 지니고 있어야 합니다.

{
    type: "INCREMENT"
}

{
    type: "DECREMENT"
}

만약에 액션과 함께 전달해야 할 값이 있을경우엔 추가해서 만들어주면 되지요.

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

여기서 이 type, 은 액션의 이름과도 같은 존재입니다. 나중에 리듀서가 액션을 전달받으면 이 값에 따라서 다른 작업을 하기도 합니다.

그런데, 이 값을, 사용 할 때 마다 모두 그냥 문자열로 사용한다면 관리하기 조금 힘들어질 수 도 있는데요. 이 값들을 따로 파일을 만들어서 저장하면 조금 편리 해진답니다.

우선, actions 디렉토리에 ActionTypes.js 라는 폴더를 만들어서 다음과 같이 상수들을 선언하세요.

`src/actions/ActionTypes.js`

/* 
 Action 의 종류들을 선언합니다.
 앞에 export 를 붙임으로서, 나중에 이것들을 불러올 때, 
 import * as types from './ActionTypes' 를 할 수 있어요.
*/

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

액션을 선언할때에는, 위와 같이, 대문자로 선언하시면 됩니다.

액션 생성자 만들기

액션을 만들때마다 객체를 그때그때 만들기는 힘들겠죠? 그래서 우리는 액션을 만드는 함수를 만들겠습니다. 이를 액션 생성자라고 부릅니다. actions 디렉토리에 index.js 파일을 만들어서 다음 함수를 만드세요.

`src/actions/index.js`

/*
    action 객체를 만드는 액션 생성자들을 선언합니다. (action creators)
    여기서 () => ({}) 은, function() { return { } } 와 동일한 의미입니다.
    scope 이슈와 관계 없이 편의상 사용되었습니다.
*/

import * as types from './ActionTypes';

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

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

// 다른 액션 생성자들과 달리, 파라미터를 갖고있습니다
export const setColor = (color) => ({
    type: types.SET_COLOR,
    color
});

increment 와 decrement는 어짜피 1씩 더하고 빼는거니까, 따로 필요한 값이 없어서 type 만 지정이 된 객체를 만들어줍니다.

하지만 setColor 의 경우는 색상을 지정해주는거여서, 파라미터로 color 값을 받고 이 값을 객체안에 넣어줍니다.

리덕스의 3가지 원칙 중에서 변화는 언제나 순수(Pure) 함수로 이뤄져야 한다는 것, 기억나나요? 더블클릭을 하면 색이 랜덤으로 변하는거지만, 그렇다고 우리가 액션을 RANDOMIZE_COLOR, randomizeColor 이런식으로 만들면 안됩니다. 왜냐구요? 랜덤함수는 실행될때마다 다른 값을 반환하기때문에 순수하지 않거든요.

자, 액션들이 만들어졌습니다!

이제 리듀서를 만들어봅시다!

1-5. Actions 만들기