Aplicación del estado de solicitud en Redux

En lecciones anteriores, utilizando reductores adicionales, describimos qué debe hacer nuestra aplicación si fetchProducts envía durante la solicitud las acciones pending, fulfilled y rejected. Ahora podemos mostrar al usuario en qué etapa se encuentra actualmente la carga de datos.

Abramos nuestra aplicación con productos, y en ella el archivo ProductsList.jsx. Lo primero que haremos es crear un componente separado para la tarjeta de producto ProductCard. Hagamos esto justo después de las líneas de importación antes de la función ProductsList. Le pasaremos como prop product:

const ProductCard = ({ product }) => {
	return ()
}

Y ahora en los paréntesis vacíos de return trasladaremos todo el código para mostrar los datos del producto desde dispProducts:

const ProductCard = ({ product }) => {
	return (
		<div key={product.id} className="product-excerpt">
			<h3>{product.name}</h3>
			<SellerOfProd sellerId={product.seller} />
			<p>{product.desc.substring(0, 100)}</p>
			<UserReactions product={product} />
			<Link to={`/products/${product.id}`} className="link-btn">
				view
			</Link>
		</div>
	)
}

Y eliminemos en ProductsList la línea de código restante. Ya no la necesitamos:

const dispProducts = products.map((product) => ())

Y ahora al principio del código de la función ProductsList creemos un par de variables más, error y content. La primera será para el error, en la segunda escribiremos un contenido u otro según el estado de la solicitud. Hagamos esto antes de const dataFetch = useRef(false):

const error = useSelector((state) => state.products.error)
let content

Ahora antes del comando return del componente ProductsList escribamos un bloque de código con condiciones, mediante las cuales en content se introducirá un contenido u otro en función del estado. Primero describiremos el estado 'in progress' - cuando nuestra solicitud se ha enviado. En este caso informaremos al usuario de que se están cargando los datos:

if (productStatus === 'in progress') {
	content = <p>Cargando lista de productos ...</p>
}

Si nuestra carga ha sido exitosa (lo designamos como 'success'), entonces necesitamos mostrar la lista de productos obtenidos. Mostrémosla en map mediante el componente ProductCard, al cual le pasaremos como prop product:

if (productStatus === 'in progress') {
	content = <p>Cargando lista de productos ...</p>
} else if (productStatus === 'success') {
	content = products.map((product) => (
		<ProductCard key={product.id} product={product} />
	))
}

Y el último estado que tenemos es 'fail'. Añadámoslo también. Usemos aquí la variable error, en la que arriba guardamos el error del estado:

if (productStatus === 'in progress') {
	content = <p>Cargando lista de productos ...</p>
} else if (productStatus === 'success') {
	content = products.map((product) => (
		<ProductCard key={product.id} product={product} />
	))
} else if (productStatus === 'fail') {
	content = <div>{error}</div>
}

Y como último paso, en el bloque de código para return reemplazaremos el antiguo {dispProducts} por {content}.

Ejecutemos nuestra aplicación, hagamos clic en el menú en 'Products'. Todo funciona. Vemos que durante aproximadamente 2 segundos (como configuramos en el servidor) debajo del formulario de añadir producto aparece el mensaje 'Products list loading ...', y luego aparece la lista de productos.

Abra su aplicación de estudiantes. Abra en ella el archivo StudentsList.jsx. Cree en él un nuevo componente StudentCard. Transfiera a él el código de dispStudents, como se muestra en la lección.

Cree en la función StudentsList las variables error y content. Asigne a la variable content el contenido según el estado de la solicitud. No se olvide de reemplazar en el código devuelto el antiguo dispStudents por content.