Lista de vendedores en Redux

En las lecciones anteriores terminamos con el material principal. Ahora usando thunk obtenemos la lista de productos del servidor y podemos guardar un nuevo producto en el servidor. Vamos a ocuparnos de los vendedores. Después de todo, recibimos datos también para ellos. Hagamos una página separada con la lista de vendedores.

Abramos nuestra aplicación de productos, y en ella la carpeta sellers. Creemos en esta carpeta el archivo SellersList.jsx. Aquí usaremos useSelector, Link y selectAllSellers, cuyo código escribiremos en sellersSlice.js un poco más tarde:

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

A continuación crearemos el propio SellersList. En él obtendremos todos los vendedores usando el hook useSelector, luego obtendremos el maquetado para la lista de vendedores en el bucle map, donde cada nombre de vendedor nos llevará a su página. Y al final retornaremos el maquetado con el título y la lista obtenida:

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>
	)
}

Luego entremos en el archivo sellersSlice.js y por analogía con los selectores en productsSlice.js creemos al final del archivo dos selectores después de exportar el reductor:

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

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

Ahora necesitamos especificar la ruta para la página con la lista, para ello abramos el archivo App.jsx y en el array de rutas hijas children agreguemos otro objeto (no olvide importar el componente SellersList):

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

Para que nuestro enlace 'Vendedores' en el menú funcione, entremos en el archivo root.jsx (¡cuánto tiempo ha pasado... ) y reemplacemos la etiqueta a por el elemento NavLink:

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

Y por último. Para que en nuestro menú se resalte el enlace activo, y sea entendible en qué página nos encontramos, agregaremos un estilo en index.css:

nav a.active {
	color: purple;
}

Ejecutemos nuestra aplicación. Ahora podemos entrar a la página de vendedores, haciendo clic en 'Vendedores' en el menú. Por supuesto, antes necesitamos hacer clic en 'Productos' en el menú, de lo contrario nuestros productos no se cargarán. En la siguiente lección haremos una página para cada vendedor y con esto terminaremos el estudio de este tutorial de Redux.

Abra su aplicación de estudiantes. Habiendo estudiado los materiales de la lección, en la carpeta teachers crea el archivo TeachersList.jsx. Usando este componente usted mostrará la lista de profesores. Importe en él los componentes y hooks necesarios.

Escriba el código para el componente TeachersList, obtenga en él todos los profesores y haga una lista de profesores teachersToRender, que en cada línea de esta lista se muestren sus apellidos e iniciales, y entre paréntesis la asignatura que imparten. Que cada nombre completo sea un enlace que lleve a una página separada para cada profesor. Luego al final del código del componente retorne el maquetado con el título y la lista creada.

Al final del archivo teachersSlice.js crea un par de funciones selectoras selectAllTeachers y selectTeacherById, como se muestra en la lección.

En App.jsx conecta otra ruta hija para la página de profesores.

En el archivo root.jsx en el menú para 'Profesores' reemplace la etiqueta a por NavLink, como se muestra en la lección. Haz que el enlace activo en el menú se resalte de alguna manera, agregando para ello estilos en index.css.