Redux'ta Ürün Sayfası

Bu derste, belirli bir ürün için bilgi çıktısı almak üzere ayrı bir sayfa yapacağız.

Ürün uygulamamızı açalım ve products klasöründe ProductPage.jsx dosyasını oluşturalım. Hatırlayacağınız gibi, her bir ürünümüzün benzersiz bir id'si var. Bu id sayesinde her bir ürün için benzersiz bir URL oluşturabileceğiz. Geleneksel olarak şöyle görünecek: /products/id123. Ve id, onun dinamik kısmında yer alacak (rotanın kendisiyle biraz sonra ilgileneceğiz).

Pekala, haydi ProductPage.jsx dosyasında boş bir ProductPage bileşeni oluşturalım:

export const ProductPage = () => {}

Burada yapacağımız ilk şey, bulunduğumuz ürün sayfasının dinamik URL kısmını almak için useParams kancasını kullanmak olacak:

export const ProductPage = () => {
	let params = useParams()
	const { productId } = params
}

Sonrasında, elde edilen id'yi kullanarak, store içindeki products diliminde aşina olduğumuz useSelector kancasını kullanarak gerekli ürünü arayacağız:

const product = useSelector((state) =>
	state.products.find((product) => product.id === productId)
)

Her iki kancayı da dosyaya içe aktarmayı unutmayalım:

import { useSelector } from 'react-redux'
import { useParams } from 'react-router-dom'

Eğer ihtiyacımız olan ürün bulunamazsa (örneğin, kullanıcı yanlış bir adres girdiyse), ekrana bununla ilgili bilgi çıktısı vereceğiz. Bu adımda, ProductPage bileşeni için kod şöyle görünmelidir:

export const ProductPage = () => {
	let params = useParams()
	const { productId } = params

	const product = useSelector((state) =>
		state.products.find((product) => product.id === productId)
	)

	if (!product) {
		return <p>Böyle bir ürün yok</p>
	}
}

Ve geriye kalan, sadece elde edilen ürün verilerini biçimlendirmede çıktılamak:

return (
	<div>
		<h2>{product.name}</h2>
		<p>Açıklama: {product.desc}</p>
		<p>Fiyat: {product.price}</p>
		<p>Miktar: {product.amount}</p>
	</div>
)

Öğrenci uygulamanızı açın. students klasöründe, seçilen öğrenciye ait bilgileri alıp çıktılayacağınız StudentPage.jsx dosyasını oluşturun.

react-redux kancası useSelector'ü kullanarak derste gösterildiği gibi öğrenci hakkında gerekli bilgileri alın.

Bileşende, elde edilen öğrenci bilgilerini ekrana çıktılayın.