React Native
Sepet
Context ile sepet yönetimi yazarsın.
Sepet Context
Sepet, birden fazla ekrandan erişilen paylaşılan bir veridir. Bu yüzden state'i prop olarak değil, Context ile tutarız. createContext() ile bir bağlam, Provider ile değer yayılır.
Provider, cart dizisini ve addToCart işlevini değer olarak verir. Her ekrandan useContext ile bu değere erişilir; prop geçmeden sepeti güncelleyebiliriz.
CartProvider
CartProvider bir bileşendir; içinde cart state'ini ve addToCart işlevini tanımlar. <CartContext.Provider value={{ cart, addToCart }}> ile çocuklara yayar; children prop'u Provider'ın içine yerleştirilir.
addToCart, yeni ürünü diziye ekler: setCart([...cart, item]). Provider'ı App'in en dışına sarmak, tüm alt bileşenlerin sepete erişmesini sağlar. Böylece prop geçirmeden hem liste hem detay sepeti güncelleyebilir.
Uygulama CartContext ve CartProvider ekle
Bir CartContext ve CartProvider ekle. Provider içinde const [cart, setCart] = useState([]) ve addToCart olsun; <CartContext.Provider value={{ cart, addToCart }}> kullansın.
Örnek çözümü göster
import React, { createContext, useContext, useState } from 'react';
import { FlatList, Text, View } from 'react-native';
const products = [
{ id: '1', name: 'Kalem', price: 20 },
{ id: '2', name: 'Defter', price: 35 },
]
const CartContext = createContext();
function CartProvider({ children }) {
const [cart, setCart] = useState([]);
const addToCart = (item) => setCart([...cart, item]);
return (
<CartContext.Provider value={{ cart, addToCart }}>
{children}
</CartContext.Provider>
);
}
export default function App() {
const [selectedId, setSelectedId] = useState(null);
const selected = products.find((p) => p.id === selectedId);
if (selected) {
return (
<View>
<Text>{selected.name}</Text>
<Text onPress={() => setSelectedId(null)}>Geri</Text>
</View>
);
}
return (
<View>
<Text>Mağaza</Text>
<FlatList
data={products}
keyExtractor={(item) => item.id}
renderItem={({ item }) => (
<Text onPress={() => setSelectedId(item.id)}>{item.name}</Text>
)}
/>
</View>
);
}
Kendini test et
-
CartProvider'ın değeri ne içermeli?
- Yalnızca stil
- Yalnızca ürün dizisi
- Sadece navigasyon
- cart ve addToCart
Cevabı göster
cart ve addToCart — Provider cart dizisini ve addToCart işlevini yaymalı.
-
addToCart gövdesini yaz
const addToCart = (item) => setCart([...cart, ____]);
Cevabı göster
const addToCart = (item) => setCart([...cart, item]);
-
Sepet kavramlarını eşleştir
- createContext
- Bağlam yaratır
- Provider
- Değer yayar
- cart
- Sepet dizisi
- addToCart
- Ürün ekler
Sıradaki ders: Birleştirme
