Página do Vendedor no Redux

Estamos quase lá. Vamos fazer a última coisa nesta lição - adicionar uma página separada para cada vendedor em nossa aplicação. Aqui estarão apenas ações que você já conhece. Vamos começar.

Vamos abrir nossa aplicação de produtos, e nela a pasta sellers. Vamos criar um arquivo SellerPage.jsx nesta pasta. Agora vamos começar a escrever o código SellerPage para o nosso componente:

export const SellerPage = () => {}

Para começar, vamos obter o id do vendedor e por meio dele encontrar o objeto do vendedor necessário no slice:

export const SellerPage = () => {
	let params = useParams()
	const { sellerId } = params

	const seller = useSelector((state) => selectSellerById(state, sellerId))
}

Em seguida, abaixo no código para SellerPage após obter o vendedor, obteremos todos os produtos e então selecionaremos apenas aqueles que foram listados por este vendedor:

const productsOfSeller = useSelector((state) => {
	const allProducts = selectAllProducts(state)
	return allProducts.filter((product) => product.seller === sellerId)
})

E então, a partir dos nomes dos produtos selecionados, vamos formar uma lista usando map. Além disso, cada nome de produto nesta lista será um link para a página desse produto:

const productNames = productsOfSeller.map((product) => (
	<li key={product.id}>
		<Link to={`/products/${product.id}`}>{product.name}</Link>
	</li>
))

E no final do código para SellerPage, retornamos o JSX: um título com o nome do vendedor e a lista de produtos que este vendedor listou:

return (
	<div>
	<h2>Vendedor: {seller.name}</h2>

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

Claro, também precisamos de uma rota para a página do vendedor. Vamos abrir o arquivo App.jsx e adicioná-la como a última das rotas filhas:

{
	path: '/sellers/:sellerId',
	element: <SellerPage />,
},

Não se esqueça de importar os hooks e componentes necessários em SellersPage.jsx e App.jsx.

Vamos iniciar nossa aplicação, carregar os produtos, e então no menu à esquerda clicar no link 'Vendedores'. Agora podemos entrar na página de qualquer vendedor, clicando em seu nome, e então em sua página ver todos os seus produtos. E, clicando em qualquer um de seus produtos, entraremos na página desse produto.

Por enquanto é isso. Estudamos os fundamentos do Redux para criar uma aplicação e até mesmo um pouco mais a fundo. Conhecemos várias ferramentas úteis. Desejo a você boa sorte na criação dos seus aplicativos Redux!

Abra sua aplicação de estudantes. Tendo estudado os materiais da lição, na pasta teachers crie um arquivo TeacherPage.jsx. No código do componente TeacherPage, obtenha o objeto do professor necessário e todos os estudantes deste professor. Usando map, crie uma lista a partir deles, deixe o nome completo de cada estudante ser um link para a página desse estudante.

No JSX retornado, deixe haver um título com o nome completo do professor, abaixo um título menor - com a disciplina que ele leciona, e ainda abaixo a lista de seus estudantes.

Em App.jsx, conecte mais uma rota filha para a página do professor.

Inicie sua aplicação e certifique-se de que tudo funciona.