React Native
Reducer fonksiyonu
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.
Örnek çözümü göster
function reducer(state, action) {
switch (action.type) {
case "increment":
return state + 1;
default:
return state;
}
}
Kendini test et
-
Switch case'i tamamla
switch (action.type) {
case "increment":
return state + 1;
case "____":
return state - 1;
default:
return state;
}
Cevabı göster
switch (action.type) {
case "increment":
return state + 1;
case "decrement":
return state - 1;
default:
return state;
}
-
Reducer ne döndürür?
function reducer(state, action) {
/* ... */
}
- Yeni state
- Eski state'i mutasyona uğratır
- Yeni action
- Hiçbir şey
Cevabı göster
Yeni state — Reducer yeni state döndürür.
-
Parçayı rolüne eşle
- reducer
- State'i hesaplar
- state
- Mevcut durum
- action
- Olay tanımı
- switch
- Dal seçimi
Sıradaki ders: Action dispatch
