Reducer fonksiyonu
- React Native kursu
- Orta seviye
- Ders 25/116
- 5 dk
Reducer fonksiyonu yazmayı öğrenirsin.
Reducer fonksiyonu nedir?
Reducer, mevcut state ve bir action alan, yeni state'i döndüren saf bir fonksiyondur. İçinde genelde bir switch deyimi olur; her case bir action türüne karşılık gelir. Örnek: function reducer(state, action) { switch (action.type) { /* ... */ } }.
Reducer'ın iki temel ilkesi vardır. Birincisi saf olması: yalnızca state ve action'dan yeni state üretir, yan etki yapmaz. İkincisi eski state'i mutasyona uğratmaması: her zaman yeni bir nesne veya değer döndürür. Bu iki ilke, reducer'ı tahmin edilebilir ve test edilebilir kılar. Bilinmeyen bir action gelirse default dalında state'i değiştirmeden döndürmek yaygın bir desendir.
Reducer örneği
Tipik bir reducer, bir sayacı yönetir. state bir sayıdır; action.type ise "increment", "decrement" veya "reset" olabilir. Her birine karşılık gelen case, yeni state'i hesaplar.
Örnek: case "increment": return state + 1;. Burada state bir sayı olduğu için yeni sayı doğrudan döndürülür. Eğer state bir nesne olsaydı, return { ...state, count: state.count + 1 } yazarak yeni nesne oluştururdun. Reducer her zaman yeni bir değer döndürmeli; mevcut state'i değiştirmemeli. default dalı bilinmeyen action'lar için state'i değiştirmeden döndürür.
Uygulama Reducer yaz
Bir reducer fonksiyonu yaz. İki parametre alsın: state ve action. switch (action.type) kullan; "increment" case'inde state + 1 döndürsün. default dalında state döndürsün.
Başlangıç kodu
// reducer fonksiyonunu yaz
// state ve action parametreleri al
// switch ile action.type'a göre increment ve default dallarını yazÖrnek çözüm
function reducer(state, action) {
switch (action.type) {
case "increment":
return state + 1;
default:
return state;
}
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Switch case'i tamamla
switch (action.type) {
case "increment":
return state + 1;
case "____":
return state - 1;
default:
return state;
}switch (action.type) {
case "increment":
return state + 1;
case "decrement":
return state - 1;
default:
return state;
}Açıklama: decrement case'i sayıyı bir azaltır.
2 Reducer ne döndürür?
function reducer(state, action) {
/* ... */
}- Yeni state Doğru cevap
- Eski state'i mutasyona uğratır
- Yeni action
- Hiçbir şey
Açıklama: Reducer yeni state döndürür.
3 Parçayı rolüne eşle
| Kavram | Anlamı |
|---|---|
reducer |
State'i hesaplar |
state |
Mevcut durum |
action |
Olay tanımı |
switch |
Dal seçimi |