React: Complex State: useReducer

function ShoppingCart() {
  const [items, setItems] = useState([])
  const [isLoading, setIsLoading] = useState(false)
  const [error, setError] = useState(null)
  const [coupon, setCoupon] = useState(null)

  // Add Item
  function addItem(product) {
    const existing = items.find(i => i.id === product.id)
    if (existing) {
      // ❌ Several setState The call order depends on the current value
      setItems(prev => prev.map(i =>
        i.id === product.id ? { ...i, qty: i.qty + 1 } : i
      ))
    } else {
      setItems(prev => [...prev, { ...product, qty: 1 }])
    }
  }

  // Apply a Coupon
  function applyCoupon(code) {
    setIsLoading(true)
    fetch('/api/coupon/' + code)
      .then(res => res.json())
      .then(data => {
        if (data.valid) {
          setCoupon(data)
          setError(null)
        } else {
          setError('Coupon is invalid')
        }
      })
      .catch(err => setError(err.message))
      .finally(() => setIsLoading(false))
  }

  // Question：items、isLoading、error、coupon The four states are interrelated
  // One operation (e.g. applyCoupon) triggers 3 setState calls
  // It's easy to miss an update to a particular state，Causes inconsistencies
}

// 1. Define the Initial State (seeded with 1 product so the cart is visible)
const initialState = {
  items: [
    { id: 1, name: 'React 101', qty: 1, price: 59 }
  ],
  isLoading: false,
  error: null,
  coupon: null,
  total: 59
}

// 2. Definition reducer（Pure Functions：Receive Previous State + action → Return to the new state）
function cartReducer(state, action) {
  switch (action.type) {
    case 'ADD_ITEM': {
      const existing = state.items.find(i => i.id === action.product.id)
      const newItems = existing
        ? state.items.map(i =>
            i.id === action.product.id ? { ...i, qty: i.qty + 1 } : i
          )
        : [...state.items, { ...action.product, qty: 1 }]
      return { ...state, items: newItems, error: null }
    }
    case 'REMOVE_ITEM':
      return {
        ...state,
        items: state.items.filter(i => i.id !== action.id)
      }
    case 'UPDATE_QTY':
      return {
        ...state,
        items: state.items.map(i =>
          i.id === action.id ? { ...i, qty: Math.max(1, action.qty) } : i
        )
      }
    case 'APPLY_COUPON_REQUEST':
      return { ...state, isLoading: true, error: null }
    case 'APPLY_COUPON_SUCCESS':
      return { ...state, isLoading: false, coupon: action.coupon }
    case 'APPLY_COUPON_FAILURE':
      return { ...state, isLoading: false, error: action.error }
    case 'CLEAR_ERROR':
      return { ...state, error: null }
    case 'RESET_CART':
      return initialState
    default:
      return state
  }
}

// 3. Using in a component
function ShoppingCart() {
  const [state, dispatch] = useReducer(cartReducer, initialState)
  const [code, setCode] = useState('')

  function handleAdd(product) {
    dispatch({ type: 'ADD_ITEM', product })
  }

  // Simulated async request for the demo (swap in a real fetch in a real app)
  function handleApplyCoupon() {
    dispatch({ type: 'APPLY_COUPON_REQUEST' })
    setTimeout(() => {
      if (code.trim().toUpperCase() === 'SAVE10') {
        dispatch({ type: 'APPLY_COUPON_SUCCESS', coupon: { code: code.trim().toUpperCase() } })
      } else {
        dispatch({ type: 'APPLY_COUPON_FAILURE', error: 'Coupon is invalid (try SAVE10)' })
      }
    }, 400)
  }

  return (
    <div>
      <p>Items in cart：{state.items.reduce((n, i) => n + i.qty, 0)}</p>
      {state.items.map(item => (
        <div key={item.id} style={{ marginBottom: 6 }}>
          {item.name} × {item.qty}
          <button onClick={() => dispatch({ type: 'UPDATE_QTY', id: item.id, qty: item.qty + 1 })}>+</button>
          <button onClick={() => dispatch({ type: 'REMOVE_ITEM', id: item.id })}>Delete</button>
        </div>
      ))}
      <button onClick={() => handleAdd({ id: Date.now(), name: 'React in Action', qty: 1, price: 79 })}>
        ➕ Add React in Action
      </button>
      <div style={{ marginTop: 12 }}>
        <input
          value={code}
          onChange={e => setCode(e.target.value)}
          placeholder="Enter coupon code"
          style={{ padding: 6 }}
        />
        <button onClick={handleApplyCoupon}>Apply coupon</button>
      </div>
      {state.isLoading && <p>Processing......</p>}
      {state.error && <p style={{ color: 'red' }}>{state.error}</p>}
      {state.coupon && <p>Coupon has been applied：{state.coupon.code}</p>}
    </div>
  )
}

const [state, dispatch] = useReducer(reducer, initialState)

// reducer It is a pure function：
function reducer(state, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 }
    case 'SET_NAME':
      return { ...state, name: action.payload }
    default:
      return state
  }
}

Side-by-side comparison: HTML syntax vs JSX syntax showing equivalent markup

Count: 0 | Last Action: none | Operations: 0. +1→INCREMENT, -1→DECREMENT, Reset→initial, Set 100. History tracks all actions.

Displays: "Reset". State: count (setter: setCount). Buttons: setCount(c => c + 1)}>+1, setCount(0)}>Reset, dispatch({ type: 'INCREMENT' })}>+1, dispatch({ type: 'DECREMENT' })}>-1. useReducer manages complex state

Click User 1/2/3 → ⏳ Loading... → 👤 card (User 1, user1@example.com, Administrator, 2026-01-15). "Trigger error" → ❌ "Invalid User ID"

Undo/Redo editor: type text → Save. Undo reverts, Redo restores. Shows past/future state stacks

Type → Save → "Current: hello". Undo → reverts to previous. Redo → restores. Shows: Past: [v1, v2] | Future: [v4]

Registration form via useReducer: username, email, password, role, agree checkbox. Submit validates fields. Reset clears all

Registration form (Username, Email, Password, Agree checkbox) via useReducer. Invalid submit → red errors. Reset → clears all fields.

Shopping cart context: product list with "Add" buttons. Cart shows items + total. "Clear" empties cart

Products (Keyboard $79, Mouse $49, Monitor $399) with "Add". Cart: items × qty + Total. "Clear" empties cart. Global state via Context.