Redux'ta Slice'tan Verilerin Tekrar Kullanılması

Önceki derste, ürün ekleme formuna, onu listeleyen satıcıyı seçmek için bir açılır liste daha eklemiştik. Şimdi diyelim ki bu bilgiyi uygulamanın birkaç yerinde daha göstermemiz gerekiyor. Bunun için her seferinde kodu kopyalamak yerine, slice'tan verileri alıp ihtiyacımız olan yerlerde gösterecek ayrı bir bileşen oluşturacağız.

Ürün uygulamamızı açalım. Şimdi products klasöründe SellerOfProd.jsx adında bir dosya daha oluşturalım. Öncelikle, ihtiyacımız olan ürünün slice'ını almak için useSelector hook'unu içe aktaralım:

import { useSelector } from 'react-redux'

Sonra, store'dan, yeni bileşenimize prop'lar aracılığıyla ileteceğimiz satıcı id'sine göre ilgili ürünü alalım:

export const SellerOfProd = ({ sellerId }) => {
	const seller = useSelector((state) =>
		state.sellers.find((seller) => seller.id === sellerId)
	)
}

Ve eğer böyle bir satıcı varsa, onun adını döndüreceğiz, yoksa 'unknown' döndüreceğiz:

return <span>by {seller ? seller.name : 'unknown'}</span>

Şimdi yeni bileşenimizi ProductsList.jsx dosyasına içe aktaralım ve ProductsList fonksiyonunda, ürün adının olduğu başlıktan hemen sonra yerleştirelim. Gördüğünüz gibi, ona prop'lar aracılığıyla id'yi ilettik:

<SellerOfProd sellerId={product.seller} />

Şimdi, eğer uygulamamızı başlatırsak, yeni bir ürün eklersek ve onu listede bulursak, onun bir satıcısının olduğunu göreceğiz, uygulama başlatıldığında otomatik olarak eklenen ürünlerde ise 'unknown' yazacak.

Küçük bir not: VS Code düzenleyicinizdeki eslint sellerId için uyarı veriyor ama uygulama çalışıyorsa, bunu şimdilik görmezden gelebilirsiniz veya uygulamanızın .eslintrc.cjs dosyasını açıp rules bölümüne "react/prop-types": "off" ekleyebilirsiniz.

Şüphesiz, satıcı bilgisini ürün sayfasında da göstermek isteriz. Bunun için ProductPage bileşeninin render kısmında, ürün adının olduğu başlıktan sonra yine bu satırı ekleyelim ve her şeyin çalıştığını kontrol edelim:

<SellerOfProd sellerId={product.seller} />

Öğrenci uygulamanızı açın. Dersin materyalini inceledikten sonra, students klasöründe TeacherForStudent bileşeni için bir dosya oluşturun. Sonuçta, bileşen öğretmenin adını soyadını döndürmeli, ve yanında parantez içinde onun verdiği dersi göstermelidir. İlgili öğretmeni useSelector hook'unu kullanarak bulun. Eğer öğrenci için bir öğretmen yoksa, 'anonym' yazdırın.

Önceki görevde elde ettiğiniz bileşeni kullanarak, öğrenci listesi sayfasında her öğrenci için öğretmen verilerini gösterin.

Önceki görevde yaptığınızı, bu sefer tek bir öğrencinin sayfası için yapın.