useReducer — CompileDaily Study

Penjelasan

useReducer adalah alternatif useState untuk state yang lebih kompleks — logikanya diekstrak ke fungsi reducer terpisah, dipanggil ("dispatch") lewat sebuah action ({type: ..., payload: ...}), dan reducer itu mengembalikan state baru berdasarkan action-nya. Berguna kalau perubahan state saling terkait/bergantung satu sama lain, jadi lebih terstruktur dibanding banyak useState terpisah.

Contoh Konsep

import { useReducer } from 'react';

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

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

    return (
        <div>
            <p>Jumlah: {state.jumlah}</p>
            <button onClick={() => dispatch({ type: 'tambah' })}>Tambah</button>
            <button onClick={() => dispatch({ type: 'reset' })}>Reset</button>
        </div>
    );
}

Praktikum

Buat reducer untuk keranjang belanja sederhana dengan action 'tambahItem' (menambah state.jumlahItem) dan 'kosongkan' (set jumlahItem ke 0). Pakai useReducer di komponen dengan dua tombol untuk memicu kedua action itu.

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

Reducer HARUS berupa fungsi PURE (tidak boleh mengubah state langsung/mutate, harus selalu return objek state BARU) — kesalahan umum adalah menulis state.jumlah++ lalu return state di dalam reducer, yang melanggar aturan ini dan bisa membuat React gagal mendeteksi perubahannya.