2-2. Actions 고치기

여러개의 카운터를 동시에 다루기 위해서, 먼저 액션들을 고치겠습니다. 우선 ActionTypes 부터 고치겠습니다. 이번에 카운터를 추가하고, 제거하는 CREATE 와 REMOVE 이 추가되었습니다.

src/actions/ActionTypes.js

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

export const CREATE = 'CREATE';
export const REMOVE = 'REMOVE';

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

그 다음에, 액션 생성자들을 수정할건데요, 방금 만들었던 CREATE, REMOVE 를 위한 액션생성자를 만들어주고, 기존 액션생성자들은 전체적으로 수정되어야합니다. 해당 액션들이 특정 카운터를 조작하도록 설정해야하므로 index 값이 액션객체에 포함되어야 합니다.

src/actions/index.js

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

import * as types from './ActionTypes';

export const create = (color) => ({
    type: types.CREATE,
    color
});

export const remove = () => ({
    type: types.REMOVE
});

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

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

export const setColor = ({index, color}) => ({
    type: types.SET_COLOR,
    index,
    color
});

예를들어 increment(3) 으로 만들어진 액션은, index 가 3인 카운터의 값을 1씩 올리는거죠.

자, 이제 리듀서를 수정하겠습니다.