useReducer nedir?
- React kursu
- Başlangıç
- Ders 61/84
- 4 dk
useReducer ile state güncellemelerini bir fonksiyona taşımayı öğrenirsin.
useReducer nedir?
useReducer, karmaşık state mantığı için useState'in alternatifidir. State'i bir reducer fonksiyonuyla yönetirsin: (state, action) => newState.
useReducer, mevcut state'i ve bir aksiyon (action) alıp yeni state döndürür. Sen dispatch ile aksiyon gönderirsin; reducer gerisini halleder.
Birçok ilişkili alan veya karmaşık geçiş varsa useReducer useState'ten daha temizdir.
Reducer yapısı
Reducer, saf bir fonksiyondur: function reducer(state, action). İçinde genelde switch(action.type) ile aksiyon türüne göre yeni state döndürürsün.
Reducer hiçbir yan etkisi olmamalıdır; aynı girdi hep aynı çıktıyı verir. Bu, test edilebilirliği artırır.
Yeni state her zaman yeni bir nesnedir; eski state değiştirilmez.
Uygulama Reducer iskeleti
Aşağıdaki iskeleti tamamla. reducer adında, (state, action) parametreli bir fonksiyon tanımla; gövdesinde return state; yapsın. Sonra Counter bileşeni yaz; useReducer'ı içe aktar ve const [state, dispatch] = useReducer(reducer, 0); tanımla. <p>{state}</p> 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) { return state; }
function Counter() {
const [state, dispatch] = useReducer(reducer, 0);
return <p>{state}</p>;
}
export default Counter;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 useReducer hangi durumlada tercih edilir?
For a simple value useState is enough.- Hiçbir zaman
- Sadece sayı sayaçlarında
- Karmaşık state mantığında Doğru cevap
- Sadece fetch için
Açıklama: Karmaşık geçişler ve ilişkili alanlar için temizdir.
2 useReducer nedir: eksik parçayı tamamla
const [state, dispatch] = useReducer(____, initial);const [state, dispatch] = useReducer(reducer, initial);Açıklama: useReducer reducer fonksiyonunu alır.
3 useReducer nedir: kavramları eşleştir
| Kavram | Anlamı |
|---|---|
reducer |
Saf fonksiyon |
dispatch |
Aksiyon gönderir |
action |
Olay bilgisi |
state |
Mevcut durum |