Reducer Pattern
Mengelola beberapa transisi state yang saling terkait dengan action bernama dan reducer yang mudah dibaca.
Tujuan belajar
- Menjelaskan kapan reducer lebih jelas daripada beberapa setter state
- Membuat action type untuk transisi state
- Mengirim action lewat dispatch dari UI
Isi lesson
5 blok- 1.Reducer memberi nama pada perubahan stateBelum selesaiWajib
- 2.Reducer untuk filter lessonBelum selesaiWajib
- 3.Reducer bukan pengganti wajib untuk useStateBelum selesaiWajib
- 4.Coding practiceBelum selesaiWajib
- 5.RingkasanBelum selesaiWajib
Reducer memberi nama pada perubahan state
Wajib`useState` tetap tepat untuk satu atau dua value sederhana. Saat banyak state berubah sebagai satu flow yang saling terkait, beberapa setter bisa membuat event handler sulit dibaca. Reducer mengumpulkan aturan perubahan itu dalam satu function.
UI mengirim action yang menjelaskan kejadian, misalnya `query-changed` atau `required-toggled`. Reducer menerima state saat ini dan action, lalu mengembalikan state berikutnya. Ini membuat transisi lebih mudah dilacak daripada menyebarkan aturan update ke banyak handler.
Bagian ini memengaruhi progres lesson.
Reducer untuk filter lesson
Wajibtype FilterState = {
query: string;
onlyRequired: boolean;
};
type FilterAction =
| { type: "query-changed"; query: string }
| { type: "required-toggled" };
function filterReducer(state: FilterState, action: FilterAction): FilterState {
switch (action.type) {
case "query-changed":
return { ...state, query: action.query };
case "required-toggled":
return { ...state, onlyRequired: !state.onlyRequired };
default:
return state;
}
}Action menyebut kejadian, bukan detail UI seperti `setInput`. Reducer menjadi satu tempat untuk melihat perubahan query dan filter wajib.
Bagian ini memengaruhi progres lesson.
Tips
WajibReducer bukan pengganti wajib untuk useState
Pilih reducer saat beberapa value berubah dalam flow yang sama, banyak handler mengubah bagian state yang sama, atau action name membuat aturan bisnis lebih jelas. Untuk toggle sederhana atau satu input lokal, `useState` biasanya lebih ringkas dan lebih mudah dibaca.
Bagian ini memengaruhi progres lesson.
Coding practice
WajibDibuka di workspace khususRefactor lesson filters ke reducer
Latihan menggabungkan query dan filter wajib ke reducer dengan action yang menjelaskan perubahan.
Tujuan awal: Fokus di tab TSX.
Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.
Tombol selesai aktif setelah semua validasi wajib lolos.
Ringkasan
Wajib- Reducer mengumpulkan transisi state terkait ke satu function.
- Action type menjelaskan kejadian yang memicu perubahan.
- dispatch mengirim action dari UI ke reducer.
- useReducer berguna saat flow state lebih rumit dari beberapa setter sederhana.
- Berikutnya, kamu akan melihat kapan context membantu sharing value lintas component tree.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian penting lesson ini
Lanjutkan blok wajib berikutnya: Reducer memberi nama pada perubahan state.