Utilisation du statut de requête dans Redux

Lors des leçons précédentes, nous avons décrit, à l'aide de réducteurs supplémentaires, ce que notre application doit faire si fetchProducts envoie lors de la requête les actions pending, fulfilled et rejected. Maintenant nous pouvons montrer à l'utilisateur à quel stade se trouve le chargement des données.

Ouvrons notre application avec les produits, et dans celle-ci le fichier ProductsList.jsx. La première chose que nous allons faire, c'est créer un composant séparé pour la carte produit ProductCard. Faisons-le juste après les lignes d'import avant la fonction ProductsList. Nous lui passerons comme prop product :

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

Et maintenant, dans les parenthèses vides du return transférons tout le code pour l'affichage des données du produit depuis 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>
	)
}

Et enlevons dans ProductsList la ligne de code restante. Elle n'est plus nécessaire :

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

Et maintenant, au début du code de la fonction ProductsList déclarons encore quelques variables, error et content. La première sera pour l'erreur, dans la seconde nous enregistrerons tel ou tel contenu en fonction du statut de la requête. Faisons cela avant const dataFetch = useRef(false) :

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

Maintenant, avant la commande return du composant ProductsList écrivons un bloc de code avec des conditions, selon lesquelles dans content sera inséré tel ou tel contenu en fonction du statut. Le premier que nous décrirons est le statut 'in progress' - lorsque notre requête est envoyée. Dans ce cas, nous informerons l'utilisateur que le chargement des données est en cours :

if (productStatus === 'in progress') {
	content = <p>Chargement de la liste des produits ...</p>
}

Si notre chargement s'est déroulé avec succès (nous l'avons désigné comme 'success'), alors nous devons afficher la liste des produits obtenus. Affichons-la dans un map à l'aide du composant ProductCard, auquel nous passerons comme prop product :

if (productStatus === 'in progress') {
	content = <p>Chargement de la liste des produits ...</p>
} else if (productStatus === 'success') {
	content = products.map((product) => (
		<ProductCard key={product.id} product={product} />
	))
}

Et le dernier statut que nous avons - c'est 'fail'. Ajoutons-le également. Utilisons ici la variable error, dans laquelle nous avons enregistré plus haut l'erreur depuis le state :

if (productStatus === 'in progress') {
	content = <p>Chargement de la liste des produits ...</p>
} else if (productStatus === 'success') {
	content = products.map((product) => (
		<ProductCard key={product.id} product={product} />
	))
} else if (productStatus === 'fail') {
	content = <div>{error}</div>
}

Et la dernière étape, dans le bloc de code pour return nous remplaçons l'ancien {dispProducts} par {content}.

Lançons notre application, cliquons dans le menu sur 'Products'. Tout fonctionne. Nous voyons qu'approximativement 2 secondes (comme nous l'avons défini sur le serveur) nous avons sous le formulaire d'ajout de produit le message 'Products list loading ...', et ensuite la liste des produits apparaît.

Ouvrez votre application avec les étudiants. Ouvrez dans celle-ci le fichier StudentsList.jsx. Créez-y un nouveau composant StudentCard. Transférez-y le code depuis dispStudents, comme montré dans la leçon.

Créez dans la fonction StudentsList les variables error et content. Affectez à la variable content le contenu en fonction du statut de la requête. N' oubliez pas de remplacer dans le retour JSX l'ancien dispStudents par content.