useReducer는 상태를 업데이트하는 로직을 컴포넌트 바깥에 구현할 수 있다는 장점이 있습니다. 덧붙여 dispatch라는 함수 하나로 다양하게 업데이트할 수 있기 때문에 Context와 함께 사용하면 유용합니다.

useReducer의 첫 번째 인자에는 reducer 함수를 넣고, 두 번째 인자에는 상태의 초깃값을 넣습니다. 이 함수의 결과물 배열의 첫 번째 원소는 현재 상태이고, 두 번째 원소는 dispatch 함수입니다.

onIncrease 함수를 보면 dispatch({type: 'decrease'})를 실행했죠? 이렇게 액션 객체를 인자에 넣어 dispatch 함수가 호출되면 reducer 함수가 호출됩니다. 이때 state 파라미터는 현재 상태를 가리키고, action은 dispatch 함수의 인자로 넣은 액션 객체를 가리킵니다. reducer에서 반환하는 값이 그다음 업데이트할 값으로 사용됩니다.

reducer를 보면 action.type에 따라 업데이트하도록 구현되어 있습니다. action 객체는 보통 이렇게 type이라는 키를 가지고 있습니다. 상황에 따라 다른 값을 action 객체에 자유롭게 넣을 수 있습니다. 다음과 같이 말이죠.

const initialState = {value: 1};

function reducer(state, action) {
  switch (action.type) {
    case 'increase':
      return {value: state.value + action.diff};
    case 'decrease':
      return {value: state.value - action.diff};
    default:
      throw new Error('Unhandled action type');
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  const onIncrease = () => dispatch({type: 'increase', diff: 1});
  const onDecrease = () => dispatch({type: 'decrease', diff: 1});

  return (...)
}