useReducer Hook

function counterReducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 }
    case 'decrement':
      return { count: state.count - 1 }
    case 'reset':
      return { count: 0 }
    default:
      throw new Error(`Unknown action: ${action.type}`)
  }
}

import { useReducer } from 'react'

function Counter() {
  const [state, dispatch] = useReducer(counterReducer, { count: 0 })

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
      <button onClick={() => dispatch({ type: 'reset' })}>Reset</button>
    </div>
  )
}

function formReducer(state, action) {
  switch (action.type) {
    case 'field-changed':
      return { ...state, [action.field]: action.value }
    case 'reset':
      return { name: '', email: '' }
    default:
      return state
  }
}

function SignupForm() {
  const [form, dispatch] = useReducer(formReducer, { name: '', email: '' })

  return (
    <input
      value={form.name}
      onChange={(e) => dispatch({ type: 'field-changed', field: 'name', value: e.target.value })}
    />
  )
}