16.2.6 리듀서 함수 정의

    리듀서는 변화를 일으키는 함수입니다. 함수의 파라미터로는 stateaction 값을 받아 옵니다.

    index.js

    const divToggle = document.querySelector('.toggle');
    const counter = document.querySelector('h1');
    const btnIncrease = document.querySelector('#id');
    const btnDecrease = document.querySelector('#decrease');
    
    const TOGGLE_SWITCH = 'TOGGLE_SWITCH';
    const INCREASE = 'INCREASE';
    const DECREASE = 'DECREASE';
    
    const toggleSwitch = () => ({ type: TOGGLE_SWITCH });
    const increase = difference => ({ type: INCREASE, difference });
    const decrease = () => ({ type: DECREASE });
    
    const initialState = {
      toggle: false,
      counter: 0
    };
    
    // state undefined 때는 initialState 기본값으로 사용
    function reducer(state = initialState, action) {
      // action.type 따라 다른 작업을 처리함
      switch (action.type) {
        case TOGGLE_SWITCH:
          return {
            ...state, // 불변성 유지를  주어야 합니다.
            toggle: !state.toggle
          };
        case INCREASE:
          return {
            ...state,
            counter: state.counter + action.difference
          };
        case DECREASE:
          return {
            ...state,
            counter: state.counter - 1
          };
        default:
          return state;
      }
    }

    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.