Reducer kalıbı
- React kursu
- Orta seviye
- Ders 13/80
- 4 dk
State, aksiyon ve reducer üçlüsünün nasıl çalıştığını öğrenirsin.
Reducer kalıbı
Reducer, bir state makinesidir: (state, action) => newState. Mevcut state ve bir aksiyon alır, yeni state döndürür. Asla mevcut state'i değiştirmez; her zaman yeni bir nesne verir.
Aksiyon bir nesnedir: { '{ type: "INCREMENT", payload: 1 }' }. type ne yapılacağını, payload ise ek veriyi taşır. Reducer, switch(state) ile her türü ayrı ayrı işler.
Reducer saf fonksiyon olduğu için test etmesi kolaydır: aynı girdi her zaman aynı çıktıyı verir. Yan etkisi yoktur (API çağrısı, console.log yok). Bu, useState'in sınırlı olduğu karmaşık durumlarda büyük avantajdır.
Switch yapısı
Reducer gövdesinde switch(action.type) kullanılır. Her case bir aksiyon türünü ele alır ve yeni state döndürür. default dalı bilinmeyen aksiyonlar için mevcut state'i döndürmelidir.
Her case mutlaka yeni bir nesne döndürmelidir; state.count++ gibi mutasyon yasaktır. Doğru yazım: return { '{ ...state, count: state.count + 1 }' }.
Bu yapı, state değişikliklerini tek bir yerde toplar. Hangi aksiyonun hangi sonucu doğuracağını okumak kolaydır. Büyük uygulamalarda bakım açısından büyük değer taşır.
Uygulama counterReducer yaz
Aşağıdaki iskeleti tamamla. counterReducer fonksiyonu yaz. (state, action) parametreleri alsın. switch(action.type) ile "INCREMENT" case'inde { '{ ...state, count: state.count + 1 }' } döndür. "DECREMENT" case'inde { '{ ...state, count: state.count - 1 }' } döndür. default state döndürsün. Dışa aktar.
Başlangıç kodu
// counterReducer fonksiyonunu buraya yazÖrnek çözüm
function counterReducer(state, action) {
switch (action.type) {
case "INCREMENT":
return { ...state, count: state.count + 1 };
case "DECREMENT":
return { ...state, count: state.count - 1 };
default:
return state;
}
}
export default counterReducer;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Reducer hangi iki parametre alır?
- props ve state
- state ve action Doğru cevap
- data ve error
- prev ve next
Açıklama: Reducer state ve action alır.
2 Reducer saf mı?
Reducer ____ fonksiyondur; yan etkisi yoktur.Reducer saf fonksiyondur; yan etkisi yoktur.Açıklama: Reducer saf fonksiyondur.
3 Reducer parçalarını eşleştir
| Kavram | Anlamı |
|---|---|
state |
Mevcut durum |
action |
Olay |
switch |
Dal |
newState |
Çıktı |