Reutilização de Dados de um Slice no Redux

Na lição anterior, adicionamos ao formulário de adição de produto mais um campo com uma lista suspensa para selecionar o vendedor que o lista. Suponha que agora também precisemos exibir essa informação em vários outros lugares do aplicativo. Para isso, não vamos duplicar o código cada vez, mas simplesmente criar um componente separado, no qual extrairemos os dados do slice e os exibiremos nas partes do aplicativo onde precisamos.

Vamos abrir nosso aplicativo de produtos. Agora, na pasta products, vamos criar mais um arquivo: SellerOfProd.jsx. Para começar, vamos importar o hook useSelector, com o qual obteremos o slice com o produto necessário:

products/SellerOfProd.jsximport { useSelector } from 'react-redux'

Em seguida, extrairemos do store o produto necessário pelo id do vendedor, que passaremos ao nosso novo componente via props:

products/SellerOfProd.jsxexport const SellerOfProd = ({ sellerId }) => {
  const seller = useSelector((state) =>
    state.sellers.find((seller) => seller.id === sellerId)
  )
}

E, caso o vendedor exista, retornaremos seu nome. Se não existir, retornaremos 'unknown':

products/SellerOfProd.jsxreturn <span>por {seller ? seller.name : 'unknown'}</span>

Agora, vamos importar nosso novo componente em ProductsList.jsx e inseri-lo na função ProductsList imediatamente após o título com o nome do produto. Como você pode ver, passamos a ele o id via props:

products/ProductsList.jsx<SellerOfProd sellerId={product.seller} />

Agora, se iniciarmos nosso aplicativo, adicionarmos um novo produto e o encontrarmos na lista, veremos que ele ganhou um vendedor, enquanto os produtos adicionados automaticamente na inicialização do aplicativo terão 'unknown'.

Um pequeno aparte: se o seu eslint no editor VS Code reclamar sobre sellerId, mas o aplicativo estiver funcionando, você pode ignorar isso por enquanto ou abrir o arquivo .eslintrc.cjs do seu aplicativo e em rules adicionar "react/prop-types": "off".

É evidente que gostaríamos de adicionar informações sobre o vendedor também na página do produto. Para isso, vamos inserir no código de ProductPage, após o título com o nome do produto, novamente esta linha e verificar se tudo funciona:

products/ProductPage.jsx<SellerOfProd sellerId={product.seller} />