Sepet context
- React kursu
- Orta seviye
- Ders 19/80
- 5 dk
Sepet reducer'ını context ile saran sağlayıcıyı yazarsın.
Sepet context
Bu ders CartProvider bileşenini yazacak. useReducer ile state ve dispatch'i alır, iki ayrı context ile sarmalar.
CartStateContext yalnızca state'i, CartDispatchContext yalnızca dispatch'i taşır. Bu, performans için önemli: yalnızca dispatch kullanan bileşenler state değişiminden etkilenmez.
Bileşenler useContext(CartStateContext) ile state'i, useContext(CartDispatchContext) ile dispatch'i okur. Birden çok bileşen aynı sepeti paylaşabilir; tek bir yerden yönetilir.
İç içe Provider
CartProvider gövdesinde iki Provider iç içe geçer: dışta CartStateContext.Provider, içte CartDispatchContext.Provider. İçeriği children prop'undan alınır.
Bu desen, sepetin uygulamanın herhangi bir yerinden dispatch edilebilmesini sağlar. Ürün kartı dispatch({ '{ type: "ADD", payload: product }' }) yapar; özet bileşeni state.total'ı okur. Akış tek yönlü ve öngörülebilir.
Provider'ı ağacın üstüne koymak yeterlidir; tüm alt bileşenler otomatik faydalanır. Birden çok sepet isteniyorsa birden çok Provider kullanılır.
Uygulama CartProvider yaz
Aşağıdaki iskeleti tamamla. CartProvider bileşeni yaz. ({ '{ children }' }) alsın. useReducer(cartReducer, { '{ items: [], total: 0 }' }) ç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
import { useReducer, createContext } from "react";
// CartProvider bileşenini buraya yazÖrnek çözüm
import { useReducer, createContext } from "react";
const CartStateContext = createContext(null);
const CartDispatchContext = createContext(null);
function CartProvider({ children }) {
const [state, dispatch] = useReducer(cartReducer, { items: [], total: 0 });
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 CartStateContext ne taşır?
- items
- dispatch
- actions
- state Doğru cevap
Açıklama: CartStateContext state taşır.
2 İki context neden
İki context ____ için kullanılır.İki context performans için kullanılır.Açıklama: İki context performans için.
3 CartProvider parçalarını eşleştir
| Kavram | Anlamı |
|---|---|
useReducer |
[state, dispatch] |
CartStateContext |
state |
CartDispatchContext |
dispatch |
children |
içerik |