Kompozisyon

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.

Örnek çözümü göster

function rootReducer(state, action) {
  return {
    user: userReducer(state.user, action),
    cart: cartReducer(state.cart, action),
  };
}

export default rootReducer;

Kendini test et

Kompozisyon ne zaman kullanılır?
- useEffect'te
- Küçük state'lerde
- CSS'te
- Büyük state'lerde
Cevabı göster

Büyük state'lerde — Kompozisyon büyük state'lerde kullanılır.

Kök reducer

Kök reducer, alt reducer'ları ____ ile birleştirir.

Cevabı göster

Kök reducer, alt reducer'ları bir nesne ile birleştirir.

Kompozisyon adımlarını eşleştir

userReducer

user
cartReducer

cart
rootReducer

birleştirir
alt reducer

küçük

Sıradaki ders: Özet - useReducer kalıbı

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler