[ React + redux 04 ] 애플리케이션 상태관리 - 리듀서 생성

리듀서 생성

앞서 설명했던 대로 리듀서는 액션의 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 값에 새 상태를 덮어쓴 상태객체를 만드는 방식으로 처리해야 한다는것에 주의하자.

// 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 type.DECREMENT:
        return {
            ...state,
            number: state.number -1
        };
        case type.SET_COLOR:
        return {
            ...state,
            color: action.color
        };
        default :
            return state;
    }
}

export default counter;

이번 프로젝트는 리듀서 하나만으로도 상태를 관리하기 충분하니, 리듀서를 하나만 만들었다.

우선 이렇게 진행하고, 프로젝트 기능을 완성한 후 이 리듀서를 서브리듀서 두개로 관리하는 방법을 알아보자.