Özet - Context derin

Sepet state'ini context + useReducer ile global yaparsın.

Özet - Context derin

Bu grupta context'i performans için bölmeyi, useReducer ile birleştirmeyi ve null varsayılan tehlikesine karşı guard hook yazmayı öğrendin. Artık büyük state'leri güvenle yönetebilirsin.

Reçete: sık değişen ile değişmeyeni ayır, her context'e özel useXContext hook'u yaz, hataları erken ve anlamlı fırlat. Bu üç adım, küresel state'i temiz ve hızlı tutar.

Bir sonraki adımda sepet için iki context + reducer yapısını bir araya getiren bir CartProvider yazacaksın.

Uygulama CartProvider iskeleti

Aşağıdaki iskeleti tamamla. CartProvider bileşeni yaz. useReducer(cartReducer, { '{ items: [] }' }) çağır; [state, dispatch] olarak çöz. <CartStateContext.Provider value={ '{ state }' }> içinde <CartDispatchContext.Provider value={ '{ dispatch }' }>{ '{ children }' }</CartDispatchContext.Provider></CartStateContext.Provider> döndür. Dışa aktar.

Örnek çözümü göster

function CartProvider({ children }) {
  const [state, dispatch] = useReducer(cartReducer, { items: [] });
  return (
    <CartStateContext.Provider value={state}>
      <CartDispatchContext.Provider value={dispatch}>
        {children}
      </CartDispatchContext.Provider>
    </CartStateContext.Provider>
  );
}

export default CartProvider;

Kendini test et

Hangisi guard hook'un görevi?
- null ise hata fırlatmak
- State'i güncellemek
- DOM'a erişmek
- useEffect'i atlamak
Cevabı göster

null ise hata fırlatmak — Guard hook null'da hata fırlatır.
Context derin adımlarını eşleştir

iki context

state + dispatch
useReducer

Büyük state
guard hook

null hatası
Provider

Sarar

Sıradaki ders: Reducer kalıbı

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler