Strona produktu w Redux

W tej lekcji stworzymy osobną stronę do wyświetlania informacji o konkretnym produkcie.

Otwórzmy naszą aplikację z produktami i w folderze products utwórzmy plik ProductPage.jsx. Jak pamiętasz, każdy nasz produkt ma unikalny id. Dzięki temu id będziemy mogli wygenerować unikalny URL strony dla każdego produktu. Tradycyjnie będzie wyglądać jak: /products/id123. I id będzie zawarte w jego dynamicznej części (samym routingiem zajmiemy się nieco później).

A więc, w ProductPage.jsx stwórzmy pusty komponent ProductPage:

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

Pierwsze, co zrobimy tutaj - skorzystamy z huka useParams, aby wyciągnąć dynamiczną część URL dla strony produktu, na której się znajdujemy:

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

Następnie po otrzymanym id poszukamy potrzebnego produktu w slicie products w store, używając już nam znanego huka useSelector:

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

Nie zapomnijmy zaimportować obu huków do pliku:

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

Jeśli zaś potrzebny nam produkt nie będzie się znajdować (na przykład, użytkownik wprowadził nieprawidłowy adres), to wyświetlimy informację o tym na ekranie. Na tym etapie kod dla komponentu ProductPage powinien wyglądać tak:

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>Brak takiego produktu</p>
  }
}

I pozostaje nam tylko wyświetlić otrzymane dane produktu w wersce:

products/ProductPage.jsxreturn (
  <div>
    <h2>{product.name}</h2>
    <p>Opis: {product.desc}</p>
    <p>Cena: {product.price}</p>
    <p>Ilość: {product.amount}</p>
  </div>
)