React
Reducer kalıbı
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.
Örnek çözümü göster
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;
Kendini test et
-
Reducer hangi iki parametre alır?
- props ve state
- state ve action
- data ve error
- prev ve next
Cevabı göster
state ve action — Reducer state ve action alır.
-
Reducer saf mı?
Reducer ____ fonksiyondur; yan etkisi yoktur.
Cevabı göster
Reducer saf fonksiyondur; yan etkisi yoktur.
-
Reducer parçalarını eşleştir
- state
- Mevcut durum
- action
- Olay
- switch
- Dal
- newState
- Çıktı
Sıradaki ders: Aksiyon tipleri
