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:

export 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:

export 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:

const product = useSelector((state) =>
	state.products.find((product) => product.id === productId)
)

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

import { 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:

export 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:

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

Abra seu aplicativo de estudantes. Na pasta students crie o arquivo StudentPage.jsx, no qual você irá obter e exibir informações sobre o estudante selecionado.

Usando o hook useSelector do react-redux, obtenha as informações necessárias sobre o estudante, conforme mostrado na lição.

Exiba no componente as informações obtidas sobre o estudante na tela.