Kompozisyon
- React kursu
- Orta seviye
- Ders 15/80
- 4 dk
Birden çok reducer'ı birleştirmeyi öğrenirsin.
Kompozisyon
Büyük state'lerde tek bir reducer yığınlaşır. Çözüm: reducer kompozisyonu. State'i parçalara böl, her parça için ayrı reducer yaz, sonra bunları bir ana reducer içinde birleştir.
Örneğin userReducer ve cartReducer ayrı ayrı yazılır. Ana reducer: function rootReducer(state, action) { return { '{ user: userReducer(state.user, action), cart: cartReducer(state.cart, action) }' }; }.
Bu desen Redux'tan gelir ve büyük uygulamalarda standardın haline gelmiştir. Her alt reducer bağımsız test edilebilir; bakımı daha kolaydır. useReducer ile de aynı yöntem uygulanır.
İç içe state
State genelde iç içedir: { '{ user: {...}, cart: {...} }' }. Kompozisyon ile her alt alan kendi reducer'ına sahiptir. Ana reducer sadece dağıtım yapar.
Her alt reducer, yalnızca kendi alanını görür: userReducer(state.user, action). Bu, reducer'ların küçük ve odaklı kalmasını sağlar. Test edilmesi tek tek kolaydır.
Bu yaklaşım, ileride yeni bir alan (örneğin theme) eklemeyi de kolaylaştırır. Yeni bir themeReducer yazıp kök reducer'a eklersin; diğerleri değişmez.
Uygulama rootReducer yaz
Aşağıdaki iskeleti tamamla. rootReducer fonksiyonu yaz. (state, action) alsın. { '{ user: userReducer(state.user, action), cart: cartReducer(state.cart, action) }' } nesnesini döndür. Dışa aktar.
Başlangıç kodu
// rootReducer fonksiyonunu buraya yazÖrnek çözüm
function rootReducer(state, action) {
return {
user: userReducer(state.user, action),
cart: cartReducer(state.cart, action),
};
}
export default rootReducer;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Kompozisyon ne zaman kullanılır?
- useEffect'te
- Küçük state'lerde
- CSS'te
- Büyük state'lerde Doğru cevap
Açıklama: Kompozisyon büyük state'lerde kullanılır.
2 Kök reducer
Kök reducer, alt reducer'ları ____ ile birleştirir.Kök reducer, alt reducer'ları bir nesne ile birleştirir.Açıklama: Kök reducer bir nesne döndürür.
3 Kompozisyon adımlarını eşleştir
| Kavram | Anlamı |
|---|---|
userReducer |
user |
cartReducer |
cart |
rootReducer |
birleştirir |
alt reducer |
küçük |