Özet - useReducer
- React kursu
- Başlangıç
- Ders 64/84
- 5 dk
Çok adımlı bir sayaç reducer'ı yazıp bileşene bağlarsın.
Özet - useReducer
Bu grupta useReducer'ı öğrendin. State, bir reducer saf fonksiyonuyla yönetilir: (state, action) => newState. Sen dispatch ile aksiyon gönderirsin.
Aksiyonlar {type, payload} nesneleridir; reducer switch ile type'a bakar. Karmaşık state için useReducer, useState'ten temizdir.
İleride Redux aynı modeli genişletecek; temeli burada sağlamlaştırdın.
Uygulama useReducer özet görevi
Aşağıdaki iskeleti tamamla. reducer fonksiyonu yaz; switch(action.type) içinde case "reset": return 0; ve default: return state; olsun. Counter bileşeni yaz; useReducer'ı içe aktar, const [state, dispatch] = useReducer(reducer, 0); tanımla. <button onClick={() => dispatch({type: "reset"})}>{state}</button> döndür. Dışa aktar.
Başlangıç kodu
import { useReducer } from "react";
// reducer ve Counter bileşenini buraya tanımlaÖrnek çözüm
import { useReducer } from "react";
function reducer(state, action) {
switch (action.type) {
case "reset": return 0;
default: return state;
}
}
function Counter() {
const [state, dispatch] = useReducer(reducer, 0);
return <button onClick={() => dispatch({ type: "reset" })}>{state}</button>;
}
export default Counter;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Aşağıdakilerden hangisi yanlış?
The choice depends on complexity.- reducer saf fonksiyondur
- useReducer her zaman useState'ten iyidir Doğru cevap
- aksiyon type taşır
- dispatch aksiyon gönderir
Açıklama: Basit state için useState daha uygun olabilir.
2 Özet - useReducer: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
reducer |
Saf fonksiyon |
dispatch |
Aksiyon gönderir |
type |
Aksiyon türü |
switch |
Tür eşleştirme |