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:

parts/products/ProductsList.jsximport { 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:

parts/products/ProductsList.jsxexport 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:

parts/products/ProductsList.jsxconst 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:

parts/products/ProductsList.jsxreturn (
  <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:

app/root.jsx<h2>Este é meu primeiro aplicativo Redux!</h2>

Para:

app/root.jsx<h2>Meu Aplicativo de Produtos</h2>

Em seguida, importe no arquivo o componente ProductsList:

app/root.jsximport { ProductsList } from '../parts/products/ProductsList'

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

app/root.jsx<ProductsList />

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