Страница за продукт во 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>
)