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:

sellers/SellersPage.jsxexport const SellerPage = () => {}

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

sellers/SellersPage.jsxexport 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:

sellers/SellersPage.jsxconst 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:

sellers/SellersPage.jsxconst 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:

sellers/SellersPage.jsxreturn (
  <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:

App.jsx{
  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!