reducer

내일배움캠프 LGLG!

6주차(주특기 숙련 - React)

reducer

리듀서는 변화를 일으키는 함수이다.
액션을 만들어서 발생시키면 리듀서가 현재 상태와 전달받은 액션 객체를 파라미터로 받아온다.
그리고 두 값을 참고하여 새로운 상태를 만들어서 반환한다.
리듀서에서는 상태의 불변성을 유지하면서 데이터에 변화를 일으켜 주어야 한다.
이 작업을 할 때 spread 연산자(…)를 사용하면 편하다.

const initialState = {
	toggle: false,
    counter: 1
};

// state가 undefined이면 initialState를 기본값으로 사용
function reducer(state = initialState, action) {
    // action type에 따라 작업 처리
    switch(action.type) {
  	case TOGGLE:
        	return {
                // 불변성 유지
            	...state, 
                toggle: !state.toggle;
            }
    	case INCREMENT:
        	return {
            	...state,
            	counter: state.counter + 1
            }
        case DECREMENT:
        	return {
            	...state,
                counter: state.counter - 1
            }
        default:
        	return state;
    }
}

Reducer에서 action.type에 따라 reducer가 실행될 때,
state 값을 변경할 때는 Spread Operator(…) or Object.assign()으로 기존 state를 복사하여 사용해야 하는 이유는 다음과 같다.
Redux는 reducer를 거친 state가 변경되었는지를 검사하기 위해 state 객체의 주소를 비교한다.
state의 복제본을 만들어 반환하면 이전의 state와 다른 주소 값을 가리키기 때문에 state가 변경되었다고 판단한다.
반대로 State를 복제하는 것이 아닌 속성만 수정해서 반환하면 기존의 state와 가리키는 주소 값이 같기 때문에 변경 감지가 되지 않는다.