Özet - Context derin
- React kursu
- Orta seviye
- Ders 12/80
- 5 dk
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.
Başlangıç kodu
// CartProvider bileşenini buraya yazÖrnek çözüm
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;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Hangisi guard hook'un görevi?
- null ise hata fırlatmak Doğru cevap
- State'i güncellemek
- DOM'a erişmek
- useEffect'i atlamak
Açıklama: Guard hook null'da hata fırlatır.
2 Context derin adımlarını eşleştir
| Kavram | Anlamı |
|---|---|
iki context |
state + dispatch |
useReducer |
Büyük state |
guard hook |
null hatası |
Provider |
Sarar |