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:

products/ProductPage.jsxexport 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:

products/ProductPage.jsxexport 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:

products/ProductPage.jsxconst product = useSelector((state) =>
  state.products.find((product) => product.id === productId)
)

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

products/ProductPage.jsximport { 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:

products/ProductPage.jsxexport 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:

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