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:

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

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

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

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

<SellerOfProd sellerId={product.seller} />

Abra seu aplicativo de estudantes. Após estudar o material da lição, na pasta students crie um arquivo para o componente TeacherForStudent. Como resultado, o componente deve retornar o nome completo do professor e, entre parênteses, a disciplina que ele leciona. Encontre o professor necessário usando o hook useSelector. Se o professor para este estudante estiver ausente, exiba 'anonym'.

Usando o componente obtido na tarefa anterior, exiba os dados do professor para cada estudante na página de lista de estudantes.

Faça o mesmo que na tarefa anterior, mas para a página individual do estudante.