React
Sepet context
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.
Örnek çözümü göster
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;
Kendini test et
-
CartStateContext ne taşır?
- items
- dispatch
- actions
- state
Cevabı göster
state — CartStateContext state taşır.
-
İki context neden
İki context ____ için kullanılır.
Cevabı göster
İki context performans için kullanılır.
-
CartProvider parçalarını eşleştir
- useReducer
- [state, dispatch]
- CartStateContext
- state
- CartDispatchContext
- dispatch
- children
- içerik
Sıradaki ders: Ürün ekleme UI
