Redux'ta Satıcı Sayfası

Gerisi küçük şeylerde kaldı. Bu derste son şeyi yapalım - uygulamamıza her bir satıcı için ayrı bir sayfa ekleyelim. Burada sadece zaten bildiğiniz işlemler olacak. Haydi başlayalım.

Ürün uygulamamızı açalım, ve içinde sellers klasörünü bulalım. Bu klasörde SellerPage.jsx dosyasını oluşturalım. Şimdi bileşenimiz için SellerPage kodunu yazmaya başlayalım:

export const SellerPage = () => {}

Öncelikle satıcının id'sini alalım ve onunla slice içinde gerekli satıcının nesnesini bulalım:

export const SellerPage = () => {
	let params = useParams()
	const { sellerId } = params

	const seller = useSelector((state) => selectSellerById(state, sellerId))
}

Daha sonra aşağıda SellerPage kodunda satıcıyı aldıktan sonra tüm ürünleri alacağız, sonra onlardan sadece bu satıcı tarafından yayınlanan ürünleri seçeceğiz:

const productsOfSeller = useSelector((state) => {
	const allProducts = selectAllProducts(state)
	return allProducts.filter((product) => product.seller === sellerId)
})

Sonra seçilen ürünlerin isimlerinden map kullanarak bir liste oluşturacağız. Üstelik bu listedeki her ürün adı o ürünün sayfasına giden bir link olacak:

const productNames = productsOfSeller.map((product) => (
	<li key={product.id}>
		<Link to={`/products/${product.id}`}>{product.name}</Link>
	</li>
))

Ve SellerPage için kodun sonunda şu yapıyı döndürelim: satıcının adıyla bir başlık ve bu satıcının yayınladığı ürünlerin listesi:

return (
	<div>
	<h2>Satıcı: {seller.name}</h2>

	<ul>{productNames}</ul>
	</div>
)

Tabii ki satıcı sayfası için bir route'a ihtiyacımız var. App.jsx dosyasını açalım ve onu alt route'ların sonuna ekleyelim:

{
	path: '/sellers/:sellerId',
	element: <SellerPage />,
},

SellersPage.jsx ve App.jsx dosyalarında gerekli hook'ları ve bileşenleri import etmeyi unutmayın.

Uygulamamızı çalıştıralım, ürünleri yükleyelim, sonra soldaki menüden 'Satıcılar' linkine tıklayalım. Artık ismine tıklayarak herhangi bir satıcının sayfasına gidebiliriz, ve sonra onun sayfasında tüm ürünlerini görebiliriz. Ve, ürünlerinden herhangi birine tıklayarak, o ürünün sayfasına gidebiliriz.

Şimdilik bu kadar. Bir uygulama oluşturmak için Redux temellerini ve hatta biraz daha derinlemesine konuları öğrendik. Çeşitli kullanışlı araçlarla tanıştık. Redux uygulamalarınızı oluştururken size başarılar dilerim!

Öğrenci uygulamanızı açın. Ders materyallerini inceleyerek, teachers klasöründe TeacherPage.jsx dosyasını oluşturun. TeacherPage bileşeninin kodunda gerekli öğretmenin nesnesini ve bu eğitmene ait tüm öğrencileri alın. map kullanarak onlardan bir liste oluşturun, her öğrencinin adı soyadı o öğrencinin sayfasına giden bir link olsun.

Döndürülen yapıda öğretmenin adı soyadı ile bir başlık, aşağısında onun verdiği ders ile ilgili daha küçük bir başlık, ve daha aşağıda onun öğrencilerinin listesi olsun.

App.jsx dosyasında öğretmen sayfası için bir tane daha alt route ekleyin.

Uygulamanızı çalıştırın ve her şeyin çalıştığından emin olun.