Özet - useReducer kalıbı
- React kursu
- Orta seviye
- Ders 16/80
- 5 dk
Çok adımlı bir form wizard reducer'ı yazıp bileşene bağlarsın.
Özet - useReducer kalıbı
Bu grupta reducer'ın ne olduğunu, aksiyon tiplerini, kompozisyonu ve switch yapısını öğrendin. Artık karmaşık state'leri düzenli biçimde yönetebilirsin.
Reçete: her state parçası için ayrı reducer, sabitlerle aksiyon tipleri, switch içinde type, kök reducer ile birleştirme. Bu, useState'in yetersiz kaldığı durumlarda net bir yol haritası sunar.
Bir sonraki adımda çok adımlı bir form için useReducer kullanan bir Wizard bileşeni yazacaksın.
Uygulama Wizard iskeleti
Aşağıdaki iskeleti tamamla. Wizard bileşeni yaz. useReducer(wizardReducer, { '{ step: 0, data: {} }' }) çağır; [state, dispatch] olarak çöz. <div><p>Adım: { '{ state.step }' }</p><button onClick={ '{ () => dispatch({ '{ type: "NEXT" }' }) }' }>İleri</button></div> döndür. Dışa aktar.
Başlangıç kodu
import { useReducer } from "react";
// Wizard bileşenini buraya yazÖrnek çözüm
import { useReducer } from "react";
function Wizard() {
const [state, dispatch] = useReducer(wizardReducer, { step: 0, data: {} });
return (
<div>
<p>Adım: {state.step}.</p>
<button onClick={() => dispatch({ type: "NEXT" })}>İleri</button>
</div>
);
}
export default Wizard;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 useReducer ne zaman tercih edilir?
- Karmaşık state geçişlerinde Doğru cevap
- Basit sayma işleminde
- CSS değişiminde
- useEffect'te
Açıklama: Karmaşık state'lerde useReducer tercih edilir.
2 useReducer kalıbını eşleştir
| Kavram | Anlamı |
|---|---|
switch |
type dalı |
sabit |
ADD |
kompozisyon |
alt reducer |
useReducer |
[state, dispatch] |