Página del vendedor en Redux

Solo queda poco por hacer. En esta lección haremos lo último: agregaremos a nuestra aplicación una página separada para cada vendedor. Aquí solo habrá acciones que ya te son familiares. Empecemos.

Abramos nuestra aplicación con productos, y en ella la carpeta sellers. Creemos en esta carpeta el archivo SellerPage.jsx. Ahora comencemos a escribir el código SellerPage para nuestro componente:

export const SellerPage = () => {}

Para empezar, obtengamos la id del vendedor y mediante ella encontremos el objeto del vendedor necesario en el slice:

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

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

A continuación, más abajo en el código para SellerPage después de obtener el vendedor, obtendremos todos los productos, y luego seleccionaremos de ellos solo aquellos que fueron publicados por este vendedor:

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

Y luego a partir de los nombres de los productos seleccionados formaremos una lista usando map. Además, cada nombre de producto en esta lista será un enlace a la página de este producto:

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

Y al final del código para SellerPage retornamos el maquetado: un título con el nombre del vendedor y la lista de productos que publicó este vendedor:

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

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

Por supuesto, también necesitamos una ruta para la página del vendedor. Abramos el archivo App.jsx y agreguémosla como la última de las rutas hijas:

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

No olvides importar los hooks y componentes necesarios en SellersPage.jsx y App.jsx.

Ejecutemos nuestra aplicación, carguemos los productos, y luego en el menú de la izquierda hagamos clic en el enlace 'Sellers'. Ahora podemos entrar a la página de cualquier vendedor, haciendo clic en su nombre, y luego en su página ver todos sus productos. Y, haciendo clic en cualquiera de sus productos, entraremos a la página de ese producto.

Eso es todo por ahora. Hemos estudiado los fundamentos de Redux para crear una aplicación e incluso un poco más allá. Nos hemos familiarizado con varias herramientas útiles. ¡Les deseo suerte en la creación de sus aplicaciones Redux!

Abre tu aplicación con los estudiantes. Habiendo estudiado los materiales de la lección, en la carpeta teachers crea el archivo TeacherPage.jsx. En el código del componente TeacherPage obtén el objeto del profesor necesario y todos los estudiantes de este profesor. Usando map crea a partir de ellos una lista, que el nombre completo de cada estudiante sea un enlace a la página de este estudiante.

Que en el maquetado retornado tengas un título con el nombre completo del profesor, más abajo un título más pequeño - con la asignatura que imparte, y aún más abajo la lista de sus estudiantes.

En App.jsx conecta otra ruta hija para la página del profesor.

Ejecuta tu aplicación y asegúrate de que todo funcione.