useReducer untuk State Kompleks
Modelkan transisi state dengan fungsi reducer, dispatch object action, dan pilih useReducer daripada useState ketika logika state menjadi kompleks.
useReducer untuk State Kompleks adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.
Saat useState Tidak Cukup
Ketika transisi status melibatkan logika kompleks, beberapa nilai terkait, atau kondisi ketika status baru bergantung pada status sebelumnya dengan cara yang tidak sederhana, useReducer merupakan pilihan yang lebih rapi daripada beberapa pemanggilan useState.
Pola Fungsi Pereduksi
Fungsi pereduksi adalah fungsi murni: (state, action) => newState. Fungsi ini menerima status saat ini dan objek aksi, lalu mengembalikan status berikutnya. Tanpa mutasi—selalu kembalikan objek baru.
type Action =
| { type: 'increment' }
| { type: 'decrement' }
| { type: 'reset'; payload: number };
function counterReducer(state: number, action: Action): number {
switch (action.type) {
case 'increment': return state + 1;
case 'decrement': return state - 1;
case 'reset': return action.payload;
default: return state;
}
}Sintaks useReducer
useReducer(reducer, initialState) mengembalikan status saat ini dan fungsi dispatch. Panggil dispatch dengan objek aksi untuk memicu transisi status.
function Counter() {
const [count, dispatch] = useReducer(counterReducer, 0);
return (
<div>
<p>{count}</p>
<button onClick={() => dispatch({ type: 'increment' })}>+</button>
<button onClick={() => dispatch({ type: 'decrement' })}>-</button>
<button onClick={() => dispatch({ type: 'reset', payload: 0 })}>Reset</button>
</div>
);
}Aksi Bertipe — Union Terbedakan
Gunakan tipe union terbedakan TypeScript untuk aksi agar mendapatkan pemeriksaan tipe menyeluruh dalam percabangan fungsi pereduksi.
type CartAction =
| { type: 'ADD_ITEM'; item: CartItem }
| { type: 'REMOVE_ITEM'; id: string }
| { type: 'SET_QUANTITY'; id: string; qty: number }
| { type: 'CLEAR' };Contoh Status Kompleks: Keranjang Belanja
Keranjang belanja dengan operasi menambah, menghapus, dan memperbarui jumlah merupakan contoh penggunaan useReducer yang sangat tepat.
interface CartState {
items: CartItem[];
total: number;
}
function cartReducer(state: CartState, action: CartAction): CartState {
switch (action.type) {
case 'ADD_ITEM': {
const exists = state.items.find(i => i.id === action.item.id);
if (exists) {
const items = state.items.map(i =>
i.id === action.item.id ? { ...i, qty: i.qty + 1 } : i
);
return { ...state, items, total: calcTotal(items) };
}
const items = [...state.items, { ...action.item, qty: 1 }];
return { ...state, items, total: calcTotal(items) };
}
case 'CLEAR': return { items: [], total: 0 };
default: return state;
}
}Dispatch Bersifat Stabil
Fungsi dispatch bersifat stabil—tidak berubah di antara render. Aman meneruskannya sebagai properti atau menggunakannya sebagai dependensi useEffect tanpa memicu eksekusi ulang.
Menggabungkan useReducer + useContext
Pola yang ampuh: sebuah konteks menyediakan status dan dispatch, sehingga konsumen mana pun dapat membaca status atau mengirim aksi tanpa meneruskan properti berantai.
const CartContext = createContext<{ state: CartState; dispatch: Dispatch<CartAction> } | null>(null);
function CartProvider({ children }: { children: React.ReactNode }) {
const [state, dispatch] = useReducer(cartReducer, { items: [], total: 0 });
return <CartContext.Provider value={{ state, dispatch }}>{children}</CartContext.Provider>;
}useReducer vs useState
Pilih useReducer jika: status memiliki beberapa subnilai, status berikutnya bergantung pada status sebelumnya dengan cara yang kompleks, transisinya banyak dan memiliki nama yang jelas, atau Anda ingin menguji logika status secara terpisah dari komponen.
Menguji Pereduksi Secara Terisolasi
Karena fungsi pereduksi adalah fungsi murni, fungsi tersebut dapat diuji dengan mudah tanpa merender komponen apa pun.
test('increment action increases count', () => {
expect(counterReducer(0, { type: 'increment' })).toBe(1);
expect(counterReducer(5, { type: 'increment' })).toBe(6);
});
test('reset action sets count to payload', () => {
expect(counterReducer(42, { type: 'reset', payload: 0 })).toBe(0);
});Immer untuk Pembaruan Imutabel
Pustaka immer memungkinkan Anda menulis kode yang tampak bermutasi, tetapi menghasilkan status imutabel baru. Berguna untuk pembaruan objek bertingkat yang kompleks dalam fungsi pereduksi.
Pemeriksaan Cepat
Apa tanda tangan fungsi dari sebuah fungsi pereduksi?
Rangkuman: useReducer
(state, action) => newState — murni, tanpa mutasi. useReducer(reducer, initial) mengembalikan [state, dispatch]. Gunakan tipe aksi union terbedakan untuk keamanan. dispatch bersifat stabil. Sangat cocok untuk status kompleks dengan banyak transisi. Gabungkan dengan useContext untuk pengelolaan status global. Uji fungsi pereduksi secara independen sebagai fungsi murni.
Belajar HTML dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 41
- Pelajaran
- 163
Pertanyaan yang Sering Diajukan
Apakah pelajaran “useReducer untuk State Kompleks” gratis?
Ya — teks lengkap “useReducer untuk State Kompleks” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “useReducer untuk State Kompleks”?
Modelkan transisi state dengan fungsi reducer, dispatch object action, dan pilih useReducer daripada useState ketika logika state menjadi kompleks. Kamu berlatih Frontend Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Frontend Academy?
Tidak diperlukan pengalaman sebelumnya. Frontend Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.
Berapa lama pelajaran “useReducer untuk State Kompleks” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Frontend Academy ini?
Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- useContext untuk State Global
- useReducer untuk State Kompleks
- useMemo dan useCallback untuk Performa
- Hook Khusus: Mengekstrak Logika yang Dapat Digunakan Kembali