useReducer – Multi-action Counter

jsxCopyEditimport React, { useReducer } from 'react';

// Reducer function
const reducer = (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:
      return state;
  }
};

function CounterWithReducer() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

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

• Cocok untuk state yang kompleks atau punya banyak aksi (seperti Redux mini).
• dispatch({ type: '...' }) seperti mengirim event.
• reducer() mengatur bagaimana state diubah.
• Jelas dan terstruktur untuk aplikasi skala menengah–besar.