1-6. 리듀서 만들기

이제 리듀서를 만들 차례입니다. 복습을 하자면, 리듀서는 액션의 type에 따라 변화를 일으키는 함수입니다. 그리고, 이 리듀서 파일에는 최초변화를 일으키기전, 지니고있어야 할 초기상태가 정의되어야 하죠.

우선, reducers 디렉토리에 index.js 파일을 생성하고, 액션 타입들을 불러온다음에 초기상태를 선언하세요.

src/reducers/index.js

import * as types from '../actions/ActionTypes';

// 초기 상태를 정의합니다
const initialState = {
    color: 'black',
    number: 0
};

이 리듀서의 초기상태로는, color 값과 number 값이 있습니다.

이제, 리듀서 함수를 작성할건데요, 리듀서 함수는 state 와 action 을 파라미터로 가지는 함수이며, 그 내부에서 switch 문을 통하여 action.type 에 따라 상태에 다른 변화를 일으키면 됩니다.

여기서 주의하실점은, state 를 직접 수정하면 절대 안되고, 기존 state 값에 덮어쓴 새 상태객체를 만드는 방식으로 해야합니다.

지금까지 우리가 이전 프로젝트들 (투두리스트, 주소록) 에서 state 내부의 객체를 다뤘었던것 처럼요.

src/reducers/index.js

import * as types from '../actions/ActionTypes';

// 초기 상태를 정의합니다
const initialState = {
    color: 'black',
    number: 0
};

/* 
    리듀서 함수를 정의합니다. 리듀서는 state 와 action 을 파라미터로 받습니다.
    state 가 undefined 일때 (스토어가 생성될때) state 의 기본값을 initialState 로 사용합니다.
    action.type 에 따라 다른 작업을 하고, 새 상태를 만들어서 반환합니다.
    이 때 주의 할 점은 state 를 직접 수정하면 안되고,
    기존 상태 값에 원하는 값을 덮어쓴 새로운 객체를 만들어서 반환해야합니다.
*/

function counter(state = initialState, action) {
    switch (action.type) {
        case types.INCREMENT: 
            return {
                ...state,
                number: state.number + 1
            };
        case types.DECREMENT:
            return {
                ...state,
                number: state.number - 1
            };
        case types.SET_COLOR:
            return {
                ...state,
                color: action.color
            };
        default:
            return state;
    }
};

export default counter;

어때요? 그렇게 어렵지 않죠?

이번 프로젝트는 리듀서 하나만으로도 상태를 관리하는데 충분하니, 리듀서를 딱 한개만 만들었는데요, 우선 이렇게 진행을 해보고 공부를 위해서 프로젝트의 기능을 완성 한 다음에 이 리듀서를 두개의 서브리듀서로 쪼개보도록 하겠습니다.

리듀서가 완성됐다면, 이제 스토어를 만들 차례입니다!