Menguasai React's useReducer Hook: Mengurus Keadaan Kompleks dengan Tindakan

gunakanReducer Hook dalam React

Cangkuk useReducer ialah cangkuk React terbina dalam yang digunakan untuk mengurus logik keadaan yang lebih kompleks dalam komponen berfungsi. Ia adalah alternatif kepada cangkuk useState apabila anda perlu mengendalikan keadaan yang melibatkan berbilang sub-nilai atau apabila logik keadaan adalah kompleks. Walaupun useState baik untuk mengurus keadaan mudah, useReducer menyediakan cara yang lebih berstruktur dan berskala untuk mengendalikan kemas kini keadaan, terutamanya apabila peralihan keadaan bergantung pada tindakan.

---

Apakah useReducer?

Kail useReducer selalunya diutamakan apabila:

• Negeri mempunyai berbilang nilai yang bergantung antara satu sama lain.
• Anda mempunyai peralihan keadaan yang kompleks.
• Anda perlu mengendalikan tindakan secara eksplisit (seperti dalam Redux).

Ia berfungsi dengan menggunakan fungsi pengurang yang mengambil keadaan semasa dan tindakan serta mengembalikan keadaan baharu. Corak ini diilhamkan oleh pustaka pengurusan negeri Redux.

---

Sintaks useReducer

const [state, dispatch] = useReducer(reducer, initialState);

• pengurang: Fungsi yang mengambil keadaan semasa dan tindakan serta mengembalikan keadaan baharu.
• initialState: Nilai keadaan awal yang pengurang akan berfungsi.
• keadaan: Keadaan semasa, dikemas kini oleh pengurang.
• penghantaran: Fungsi yang digunakan untuk menghantar tindakan kepada pengurang, yang mencetuskan kemas kini keadaan.

---

Cara useReducer Berfungsi

1. Buat Fungsi Pengurang: Fungsi pengurang menerima dua hujah: keadaan semasa dan tindakan. Ia menggunakan ini untuk mengira dan mengembalikan keadaan baharu.

   const reducer = (state, action) => {
     switch (action.type) {
       case 'increment':
         return { count: state.count + 1 };
       case 'decrement':
         return { count: state.count - 1 };
       default:
         return state;
     }
   };

1. Tentukan Keadaan Awal: InitialState ialah titik permulaan keadaan sebelum sebarang tindakan dihantar.

   const initialState = { count: 0 };

1. Gunakan useReducer dalam Komponen Anda: Sekarang, di dalam komponen anda, anda boleh menggunakan useReducer untuk mengendalikan keadaan. Anda akan mendapat keadaan dan penghantaran dari cangkuk.

   const Counter = () => {
     const [state, dispatch] = useReducer(reducer, initialState);

     return (
       <div>
         <p>Count: {state.count}</p>
         <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
         <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
       </div>
     );
   };

• Penjelasan:
  • Apabila butang Penambahan diklik, ia menghantar tindakan dengan jenis 'kenaikan'.
  • Fungsi pengurang menerima tindakan ini dan mengemas kini keadaan sewajarnya.
  • penghantaran digunakan untuk mencetuskan kemas kini keadaan dengan menghantar tindakan kepada pengurang.

---

Contoh Penuh dengan useReducer:

Berikut ialah contoh lengkap yang menunjukkan penggunaan useReducer untuk mengurus kaunter:

const [state, dispatch] = useReducer(reducer, initialState);

• Penjelasan:
  • useReducer dimulakan dengan fungsi reducer dan initialState.
  • penghantaran digunakan untuk mencetuskan tindakan (kenaikan, pengurangan atau penetapan semula).
  • Setiap tindakan menghasilkan kemas kini keadaan berdasarkan jenis tindakan.

---

Bila Menggunakan useReducer Over useState

• Logik Keadaan Kompleks: Apabila keadaan melibatkan berbilang sub-nilai atau peralihan kompleks antara keadaan.

Contoh: Menguruskan borang dengan berbilang medan yang mana medan perlu dikemas kini secara bebas tetapi bergantung antara satu sama lain.

• Lebih Baik untuk Pelbagai Tindakan: Jika komponen anda mempunyai tindakan berbeza yang mengubah suai keadaan dalam pelbagai cara (cth., kenaikan, pengurangan, tetapan semula).

• Nyahpepijat: useReducer lebih boleh diramal dan boleh diuji. Memandangkan peralihan keadaan adalah eksplisit (melalui tindakan), ia memudahkan untuk menjejaki perubahan dan nyahpepijat.

• Lebih Serupa dengan Redux: Jika anda sedang membina apl berskala lebih besar yang kemudiannya akan menggunakan Redux, useReducer mempunyai corak yang serupa dan boleh menjadi batu loncatan yang baik.

---

Pertimbangan Prestasi

• Pengumpulan: Dalam React, kemas kini yang dicetuskan oleh useReducer adalah berkelompok, bermakna berbilang penghantaran (walaupun secara berturut-turut) diproses dalam satu kitaran pemaparan, yang boleh membantu dengan prestasi.

• Elakkan Penggunaan Berlebihan: Jika logik keadaan anda adalah mudah (cth., satu pembilang), penggunaan useState biasanya lebih mudah dan mengelakkan kerumitan yang tidak perlu. Gunakan useReducer apabila anda mendapati diri anda memerlukan lebih banyak struktur.

---

Membandingkan useState vs useReducer

Ciri useState useReducer

Feature	useState	useReducer
Simplicity	Ideal for simple state with primitive values	Best for complex state or multiple actions
State Structure	Works well for single values or arrays/objects	Great for state objects with multiple sub-values
Action Handling	Doesn’t require actions; just updates state directly	Requires action objects to update state
Use Case	Small, independent pieces of state	Complex state transitions with many actions

Kesederhanaan Sesuai untuk keadaan mudah dengan nilai primitif Terbaik untuk keadaan kompleks atau berbilang tindakan Struktur Negeri Berfungsi dengan baik untuk nilai tunggal atau tatasusunan/objek Hebat untuk objek keadaan dengan berbilang sub-nilai Pengendalian Tindakan Tidak memerlukan tindakan; hanya kemas kini nyatakan secara langsung Memerlukan objek tindakan untuk mengemas kini keadaan Kes Penggunaan Kepingan negeri yang kecil dan bebas Peralihan keadaan kompleks dengan banyak tindakan

---

Ringkasan penggunaanReducer Hook

• useReducer digunakan untuk mengurus logik keadaan kompleks dalam React.
• Ia memberikan lebih kawalan ke atas peralihan keadaan berbanding useState dan sesuai apabila keadaan bergantung pada tindakan atau perlu dikemas kini dalam cara yang berstruktur.
• Cakuk mengembalikan tatasusunan: keadaan semasa dan fungsi penghantaran untuk mencetuskan tindakan yang akan mengemas kini keadaan.
• Ia menggunakan fungsi pengurang yang menerima keadaan semasa dan tindakan untuk mengira dan mengembalikan keadaan baharu.

---

Kesimpulan

Kait useReducer berkuasa untuk menguruskan logik keadaan kompleks dalam React. Ia memberi anda lebih kawalan ke atas kemas kini keadaan dan menjadikannya lebih mudah untuk mengendalikan peralihan keadaan yang bergantung pada berbilang nilai atau tindakan. Jika komponen anda mempunyai keadaan kompleks yang memerlukan kemas kini berstruktur atau jika anda datang dari Redux, useReducer ialah penyelesaian yang hebat.

---

Atas ialah kandungan terperinci Menguasai React's useReducer Hook: Mengurus Keadaan Kompleks dengan Tindakan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!