Página do produto no Redux

Nesta lição, vamos criar uma página separada para exibir informações sobre um produto específico.

Vamos abrir nosso aplicativo de produtos e na pasta products criar o arquivo ProductPage.jsx. Como você se lembra, cada nosso produto tem um id único. Graças a este id, poderemos gerar um URL único para a página de cada produto. Tradicionalmente, ele ficará assim: /products/id123. E o id estará contido na sua parte dinâmica (vamos lidar com a própria rota um pouco mais tarde).

Então, vamos em ProductPage.jsx criar um componente vazio ProductPage:

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

A primeira coisa que faremos aqui - usaremos o hook useParams para extrair a parte dinâmica do URL da página do produto em que estamos:

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

Em seguida, usando o id obtido, vamos procurar o produto necessário no slice products na store, usando o hook já conhecido useSelector:

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

Não vamos esquecer de importar ambos os hooks no arquivo:

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

Se o produto que precisamos não for encontrado (por exemplo, o usuário digitou um endereço inválido), vamos exibir uma informação sobre isso na tela. Neste passo, o código para o componente ProductPage deve ficar assim:

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>Produto não encontrado</p>
  }
}

E nos resta apenas exibir os dados obtidos do produto no layout:

products/ProductPage.jsxreturn (
  <div>
    <h2>{product.name}</h2>
    <p>Descrição: {product.desc}</p>
    <p>Preço: {product.price}</p>
    <p>Quantidade: {product.amount}</p>
  </div>
)