CodeBlanks Logo Icon CodeBlanks

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.

Başlangıç kodu

App.js
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 },
]

// CartContext ve CartProvider'ı buraya ekle

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>
  );
}

Örnek çözüm

App.js
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>
  );
}

Soru ve cevaplar

Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.

1 CartProvider'ın değeri ne içermeli?

  • Yalnızca stil
  • Yalnızca ürün dizisi
  • Sadece navigasyon
  • cart ve addToCart Doğru cevap

Açıklama: Provider cart dizisini ve addToCart işlevini yaymalı.

2 addToCart gövdesini yaz

Soru
const addToCart = (item) => setCart([...cart, ____]);
Cevap
const addToCart = (item) => setCart([...cart, item]);

Açıklama: Yeni ürün item olarak diziye eklenir.

3 Sepet kavramlarını eşleştir

Kavram Anlamı
createContext Bağlam yaratır
Provider Değer yayar
cart Sepet dizisi
addToCart Ürün ekler

Orta seviye bölümündeki tüm dersler