პროდუქტის გვერდი Redux-ში

ამ გაკვეთილზე ჩვენ შევქმნით ცალკე გვერდს კონკრეტული პროდუქტის ინფორმაციის საჩვენებლად.

გავხსნათ ჩვენი პროდუქტების აპლიკაცია და ფოლდერში products შევქმნათ ფაილი ProductPage.jsx. როგორც გახსოვთ, ჩვენს თითოეულ პროდუქტს აქვს უნიკალური id. ამ id-ის წყალობით ჩვენ შევძლებთ შევქმნათ უნიკალური URL მისამართი თითოეული პროდუქტისთვის. ტრადიციულად ის ასე გამოიყურება: /products/id123. და id იქნება მის დინამიკურ ნაწილში (თავად მარშრუტით ჩვენ ცოტა მოგვიანებით დავიკავებით).

მაშ, მოდით ProductPage.jsx-ში შევქმნათ ცარიელი კომპონენტი ProductPage:

products/ProductPage.jsxexport const ProductPage = () => {}

პირველი, რასაც ჩვენ აქ გავაკეთებთ - გამოვიყენებთ ჰუკს useParams, რათა გამოვყოთ დინამიკური ნაწილი URL მისამართიდან იმ პროდუქტის გვერდისთვის, რომელზეც ვიმყოფებით:

products/ProductPage.jsxexport const ProductPage = () => {
  let params = useParams()
  const { productId } = params
}

შემდეგ მიღებული id-ის მიხედვით ჩვენ ვეძებთ საჭირო პროდუქტს სლაისში products store-ში, ჩვენთვის უკვე ნაცნობი ჰუკის useSelector გამოყენებით:

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

არ დაგვავიწყდეს ორივე ჰუკის იმპორტირება ფაილში:

products/ProductPage.jsximport { useSelector } from 'react-redux'
import { useParams } from 'react-router-dom'

თუ კი ჩვენთვის საჭირო პროდუქტი არ მოიძებნა (მაგალითად, მომხმარებელმა შეიყვანა არასწორი მისამართი), მაშინ ჩვენ ამის შესახებ ინფორმაციას ეკრანზე გამოვიტანთ. ამ ეტაპზე კომპონენტისთვის ProductPage კოდი ასე უნდა გამოიყურებოდეს:

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>ასეთი პროდუქტი არ არსებობს</p>
  }
}

და ჩვენ მხოლოდ რჩება მიღებული მონაცემების პროდუქტის ვერსტკაში გამოტანა:

products/ProductPage.jsxreturn (
  <div>
    <h2>{product.name}</h2>
    <p>აღწერა: {product.desc}</p>
    <p>ფასი: {product.price}</p>
    <p>რაოდენობა:{product.amount}</p>
  </div>
)