useReducer: State yang Kompleks

Ketika useState mulai ribet

Jika satu komponen punya banyak state yang saling terkait dan banyak cara mengubahnya, handler-nya tersebar dan sulit dilacak. useReducer memusatkan semua logika perubahan state di satu function: reducer.

Reducer

Reducer adalah function murni: menerima state sekarang dan action, lalu mengembalikan state baru.

function reducer(state, action) {
  switch (action.type) {
    case "tambah":
      return { jumlah: state.jumlah + 1 };
    case "kurang":
      return { jumlah: state.jumlah - 1 };
    case "reset":
      return { jumlah: 0 };
    default:
      return state;
  }
}

Karena murni: tidak mengubah state lama, tidak ada efek samping, hasil selalu sama untuk input yang sama — mudah diuji tanpa React.

Memakai di komponen

import { useReducer } from "react";

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

  return (
    <div>
      <span className="angka">{state.jumlah}</span>
      <button onClick={() => dispatch({ type: "tambah" })}>+</button>
      <button onClick={() => dispatch({ type: "kurang" })}>-</button>
      <button onClick={() => dispatch({ type: "reset" })}>Reset</button>
    </div>
  );
}

• dispatch(action) "mengirim" niat perubahan; React memanggil reducer lalu merender ulang.
• Action biasanya object dengan type dan (opsional) payload:

dispatch({ type: "tambahTugas", payload: { judul: "Belajar" } });

useState vs useReducer

Praktik baik

• Selalu kembalikan object/array baru (immutability) di reducer.
• Beri nama action yang menggambarkan kejadian ("tugasDitambahkan") bukan perintah setter ("setTugas").
• Reducer sering dipasangkan dengan Context untuk state global (pola yang menjadi dasar Redux).

Redux Toolkit

Jika aplikasimu besar, Redux Toolkit menyediakan pola reducer yang lebih lengkap (slice, devtools, middleware) memakai konsep yang sama.