Redux 시작하기(3) - Reducer

  reducer를 좀 더 자세히 다루어 보겠다. 복잡한 앱을 만들 경우, reducer 함수가 점점 많아진다. 이걸 효율적으로 관리하기 위해 combineReducers라는 함수를 사용할 수 있다. combineReducers는 서로 다른 reducer 함수들을 받아서 하나의 reducer 함수로 만들어 준다.

  state의 모양을 다음과 같이 만들려고 한다고 하자.

{
	num: 0,
    	list: []
}

그러면 combineReducers는 다음과 같은 형태로 쓸 수 있다.

 

(reducer.js)

const numReducer = (state = 0, action) {
	switch (action.type) {
    	case "INC_NUM":
        	return state + 1;
        case "DEC_NUM":
        	return state - 1;
        default:
        	return state;
    }
}

const listReducer = (state = [], action) {
	switch (action.type) {
    	case "APPEND_ELEM":
        	return state.concat([action.elem]);
        default:
        	return state;
    }
}

const rootReducer = combineReducers({
	num: numReducer,
    list: listReducer
});

export default rootReducer;