Obtendo dados da store em um componente no Redux

Nesta lição, exibiremos os dados da store em um componente React.

Vamos abrir nosso aplicativo de produtos, entrar na pasta parts/products e criar nela o arquivo ProductsList.jsx. Primeiro, vamos importar nele o hook useSelector, com o qual obteremos os dados da store:

import { useSelector } from 'react-redux'

Agora vamos obter os produtos da store. Não vamos criar a função seletora separadamente, vamos escrever seu código diretamente no parâmetro para useSelector:

export const ProductsList = () => {
	const products = useSelector((state) => state.products)
}

Em seguida, exibiremos os produtos da maneira padrão no corpo da função ProductsList após a linha de obtenção dos produtos, usando map:

const dispProducts = products.map((product) => (
	<div key={product.id}>
		<h3>{product.name}</h3>
		<p>{product.desc.substring(0, 100)}</p>
		<p>Preço: {product.price}</p>
		<p>Quantidade: {product.amount}</p>
	</div>
))

E abaixo exibiremos dispProducts na seguinte estrutura:

return (
	<div>
		<h2>Produtos</h2>
		{dispProducts}
	</div>
)

Agora só falta exibir nossa lista de produtos na página principal. Vamos abrir o arquivo root.jsx e corrigir o título:

<h2>Este é meu primeiro aplicativo Redux!</h2>

Para:

<h2>Meu Aplicativo de Produtos</h2>

Em seguida, importe no arquivo o componente ProductsList:

import { ProductsList } from '../parts/products/ProductsList'

E insira-o na div com id main-page imediatamente após a tag de fechamento hr:

<ProductsList />

Vamos executar nosso aplicativo. Nossa lista de dois produtos foi exibida com sucesso na página principal.

Abra seu aplicativo de estudantes. Crie o arquivo StudentsList.jsx na pasta students.

Obtenha os estudantes da store usando o hook useSelector, conforme descrito na lição. Exiba todos os campos com informações sobre os estudantes do estado, usando map.

Importe o componente obtido StudentsList em root.jsx e exiba-o na página principal. Certifique-se de que todas as informações sobre os estudantes foram exibidas na tela.