Lista de Vendedores no Redux

Nas lições anteriores, terminamos o conteúdo principal. Agora, usando thunk, obtemos uma lista de produtos do servidor e podemos salvar um novo produto no servidor. Vamos entender os vendedores. Afinal, recebemos dados para eles também. Vamos criar uma página separada com a lista de vendedores.

Vamos abrir nosso aplicativo de produtos, e na sua pasta sellers. Vamos criar nesta pasta o arquivo SellersList.jsx. Aqui usaremos useSelector, Link e selectAllSellers, cujo código escreveremos em sellersSlice.js mais tarde:

import { useSelector } from 'react-redux'
import { Link } from 'react-router-dom'
import { selectAllSellers } from './sellersSlice'

Em seguida, criaremos o próprio SellersList. Nele, obteremos todos os vendedores usando o hook useSelector, depois obteremos a marcação para a lista de vendedores em um loop map, onde cada nome de vendedor será um link para sua página. E no final, retornaremos a marcação com o título e a lista obtida:

export const SellersList = () => {
	const sellers = useSelector(selectAllSellers)
	const sellersToRender = sellers.map((seller) => (
		<li key={seller.id}>
			<Link to={`/sellers/${seller.id}`}>{seller.name}</Link>
		</li>
	))

	return (
		<div>
			<h2>Vendedores:</h2>

			<ul>{sellersToRender}</ul>
		</div>
	)
}

Em seguida, vamos para o arquivo sellersSlice.js e, por analogia com os seletores em productsSlice.js, criaremos no final do arquivo dois seletores após a exportação do redutor:

export const selectAllSellers = (state) => state.sellers

export const selectSellerById = (state, sellerId) =>
state.sellers.find((seller) => seller.id === sellerId)

Agora precisamos definir a rota para a página com a lista, para isso abrimos o arquivo App.jsx e no array de rotas filhas children adicionamos mais um objeto (não se esqueça de importar o componente SellersList):

{
	path: '/sellers',
	element: <SellersList />,
},

Para que nosso link 'Vendedores' no menu funcione, vamos para o arquivo root.jsx (faz tempo que não íamos lá... ) e substituir a tag a pelo elemento NavLink:

<NavLink to="/sellers" end>
	Vendedores
</NavLink>

E por último. Para que em nosso menu o link ativo seja destacado, e fique claro em qual página estamos, adicionaremos um estilo em index.css:

nav a.active {
	color: purple;
}

Vamos iniciar nosso aplicativo. Agora podemos entrar na página com os vendedores, clicando em 'Vendedores' no menu. Antes, claro, precisamos clicar em 'Produtos' no menu, caso contrário nossos produtos não serão carregados. Na próxima lição, faremos uma página para cada vendedor e com isso terminaremos o estudo deste tutorial sobre Redux.

Abra seu aplicativo com os estudantes. Tendo estudado os materiais da lição, na pasta teachers crie o arquivo TeachersList.jsx. Usando este componente, você exibirá a lista de professores. Importe para ele os componentes e hooks necessários.

Escreva o código para o componente TeachersList, obtenha nele todos os professores e faça uma lista de professores teachersToRender, deixe em cada linha desta lista exibir seus sobrenomes e iniciais, e entre parênteses a disciplina que eles lecionam. Deixe cada sobrenome e iniciais serem um link, que leva a uma página separada para cada professor. Em seguida, no final do código do componente, retorne a marcação com o título e a lista criada.

No final do arquivo teachersSlice.js, crie um par de funções-seletor selectAllTeachers e selectTeacherById, como mostrado na lição.

Em App.jsx, conecte mais uma rota filha para a página com os professores.

No arquivo root.jsx, no menu para 'Professores', substitua a tag a por NavLink, como mostrado na lição. Faça com que o link ativo no menu se destaque de alguma forma, adicionando estilos para isso em index.css.