Affichage des résultats du travail d'un thunk dans un composant Redux

Lors de la dernière leçon, nous avons envoyé une requête POST en utilisant le thunk addProduct. Maintenant, affichons les résultats de son travail dans le composant.

Ouvrons notre application de produits, et dans celle-ci le fichier NewProductForm.jsx, puisque ce composant est responsable de l'ajout d'un nouveau produit. Regardons les lignes d'importation. Remplaçons l'import de l'action productAdded, par l'import du thunk addProduct :

import { addProduct } from './productsSlice'

Maintenant, puisque nous ne suivons pas dans le slice le statut 'pending' de la requête, faisons en sorte que l'utilisateur ne puisse cliquer sur le bouton de sauvegarde du produit qu'une seule fois, car nous ne voulons pas de requêtes répétées identiques. Pour cela, créons un autre état local :

const [requestStatus, setRequestStatus] = useState('idle')

Ensuite, après les gestionnaires et avant la fonction onSaveProductClick, écrivons le code qui vérifie si tous les champs du formulaire sont remplis et si le statut de la requête est 'idle' :

const canBeSaved =
	[name, desc, price, amount, sellerId].every(Boolean) &&
	requestStatus === 'idle'

Ensuite, nous modifierons le code pour onSaveProductClick. Premièrement, ce sera une fonction asynchrone et elle s'exécutera si la condition ci-dessus est vraie :

const onSaveProductClick = async () => {
	if (canBeSaved) {}
}

Même si nous ne suivons pas le statut 'rejected' dans le slice, nous pouvons quand même afficher dans la console l'erreur, pour cela utilisons la construction try-catch. Ici nous ajouterons aussi un bloc finally, pour qu'après l'exécution de la requête, nous remettions l'état local à 'idle' :

const onSaveProductClick = async () => {
	if (canBeSaved) {
		try {
		} catch (err) {
			console.error('save product error: ', err)
		} finally {
			setRequestStatus('idle')
		}
	}
}

Nous avons traité les blocs catch et finally, écrivons maintenant le code pour le bloc try. Ici, nous définirons le statut local sur 'in progress', jusqu'à ce que nous recevions une réponse résultant du travail du thunk, puis nous enverrons notre thunk addProduct. Utiliser la construction try-catch en fonction du type de réponse nous sera aidé par la fonction RTK unwrap, qu'elle ajoute à la promesse retournée. Ensuite, si la requête a réussi, nous remettons les états locaux à leurs états initiaux. Le code complet pour onSaveProductClick ressemblera à ceci :

const onSaveProductClick = async () => {
	if (canBeSaved) {
		try {
			setRequestStatus('in progress')
			await dispatch(
				addProduct({ name, desc, price, amount, seller: sellerId })).unwrap()
			setName('')
			setDesc('')
			setPrice(0)
			setAmount(0)
			setSellerId('')
		} catch (err) {
			console.error('save product error: ', err)
		} finally {
			setRequestStatus('idle')
		}
	}
}

Lançons notre application et essayons d'ajouter un nouveau produit. Comme vous le voyez, en cas de requête réussie, les champs sont vidés et le nouveau produit est ajouté à la liste des produits. Jetez également un œil dans le navigateur à Redux DevTools et parcourez ses onglets, regardez les actions et comment votre état change.

Ouvrez votre application d'étudiants. Ouvrez-y le fichier NewStudentForm.jsx. Ajoutez un autre état local requestStatus, et définissez-le initialement sur 'idle'. Après avoir pris connaissance des matériels de la leçon, créez la variable canBeSaved, à l'aide de laquelle le bouton de sauvegarde des nouvelles données de l'étudiant fonctionnera/ne fonctionnera pas, en fonction de la valeur de requestStatus et du remplissage des champs.

Écrivez le code asynchrone pour onSaveStudentClick, qui changera la valeur de requestStatus selon la situation, enverra le thunk addProduct avec les données du nouvel étudiant, videra les champs en cas de requête réussie et affichera dans la console l'erreur en cas d'échec, comme montré dans la leçon. Utilisez pour cela la construction try-catch et la fonction RTK unwrap.

Lancez votre application, ajoutez un nouvel étudiant et assurez-vous que tout fonctionne.