Εμφάνιση των αποτελεσμάτων της εργασίας thunk στο component στο Redux

Στο προηγούμενο μάθημα στείλαμε ένα αίτημα POST χρησιμοποιώντας το thunk addProduct. Ας εμφανίσουμε τώρα τα αποτελέσματα της εργασίας του στο component.

Ας ανοίξουμε την εφαρμογή μας με τα προϊόντα, και σε αυτή το αρχείο NewProductForm.jsx, αφού αυτό το component είναι υπεύθυνο για την προσθήκη νέου προϊόντος. Ας δούμε τις γραμμές με τα imports. Ας αντικαταστήσουμε την εισαγωγή της action productAdded, με την εισαγωγή του thunk addProduct:

import { addProduct } from './productsSlice'

Τώρα, αφού δεν παρακολουθούμε στο slice την κατάσταση 'pending' του αιτήματος, ας κάνουμε έτσι ώστε ο χρήστης να μπορεί να πατήσει το κουμπί αποθήκευσης του προϊόντος μόνο μία φορά, αφού δεν χρειαζόμαστε τα ίδια επαναλαμβανόμενα αιτήματα. Για αυτό, ας δημιουργήσουμε μια ακόμη τοπική κατάσταση:

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

Στη συνέχεια, μετά τους handlers και πριν από τη συνάρτηση onSaveProductClick ας γράψουμε κώδικα, στον οποίο θα ελέγξουμε αν όλα τα πεδία της φόρμας έχουν συμπληρωθεί και αν η κατάσταση του αιτήματος είναι 'idle':

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

Μετά θα αλλάξουμε τον κώδικα για το onSaveProductClick. Πρώτα απ' όλα, αυτή θα είναι μια ασύγχρονη συνάρτηση και θα εκτελείται, αν ισχύει η παραπάνω συνθήκη:

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

Παρόλο που στο slice δεν παρακολουθούμε την κατάσταση 'rejected', μπορούμε πάλι να εμφανίσουμε στο κονσόλο το σφάλμα, για αυτό θα χρησιμοποιήσουμε τη δομή try-catch. Επίσης εδώ θα προσθέσουμε και το finally, ώστε μετά την εκτέλεση του αιτήματος να θέσουμε ξανά την τοπική κατάσταση σε 'idle':

const onSaveProductClick = async () => {
	if (canBeSaved) {
		try {
		} catch (err) {
			console.error('σφάλμα αποθήκευσης προϊόντος: ', err)
		} finally {
			setRequestStatus('idle')
		}
	}
}

Με τα μπλοκ catch και finally τα ξεκαθαρίσαμε, ας γράψουμε κώδικα για το μπλοκ try. Εδώ θα θέσουμε την τοπική κατάσταση σε 'in pogress', μέχρι να μας επιστραφεί κάποια απάντηση ως αποτέλεσμα της εργασίας του thunk, μετά θα στείλουμε το thunk μας addProduct. Η χρήση της δομής try-catch ανάλογα με τον τύπο της απάντησης θα μας βοηθήσει από τη συνάρτηση RTK unwrap, την οποία προσθέτει στο promise που επιστρέφεται. Μετά, αν το αίτημα ήταν επιτυχές, θέτουμε τις τοπικές καταστάσεις στις αρχικές τους τιμές. Ο πλήρης κώδικας για το onSaveProductClick θα μοιάζει έτσι:

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('σφάλμα αποθήκευσης προϊόντος: ', err)
		} finally {
			setRequestStatus('idle')
		}
	}
}

Ας εκκινήσουμε την εφαρμογή μας και ας προσπαθήσουμε να προσθέσουμε ένα νέο προϊόν. Όπως βλέπετε, σε περίπτωση επιτυχούς αιτήματος τα πεδία καθαρίζουν και το νέο προϊόν προστίθεται στη λίστα των προϊόντων. Επίσης, ρίξτε μια ματιά στο πρόγραμμα πλοήγησης στο Redux DevTools και πλοηγηθείτε στις καρτέλες του, δείτε τα actions και πώς αλλάζει η κατάστασή σας.

Ανοίξτε την εφαρμογή σας με τους μαθητές. Ανοίξτε σε αυτή το αρχείο NewStudentForm.jsx. Προσθέστε μια ακόμη τοπική κατάσταση requestStatus, και θέστε την αρχικά σε 'idle'. Μελετώντας το υλικό του μαθήματος, δημιουργήστε τη μεταβλητή canBeSaved, με τη βοήθεια της οποίας το κουμπί αποθήκευσης νέων δεδομένων μαθητή θα λειτουργεί/δεν θα λειτουργεί, ανάλογα με την τιμή του requestStatus και από το αν έχουν συμπληρωθεί τα πεδία.

Γράψτε ασύγχρονο κώδικα για το onSaveStudentClick, ο οποίος θα αλλάζει την τιμή του requestStatus ανάλογα με την κατάσταση, θα στέλνει το thunk addProduct με τα δεδομένα του νέου μαθητή, θα καθαρίζει τα πεδία σε περίπτωση επιτυχούς αιτήματος και θα εμφανίζει στο κονσόλο το σφάλμα σε περίπτωση αποτυχίας, όπως φαίνεται στο μάθημα. Χρησιμοποιήστε για αυτό τη δομή try-catch και τη συνάρτηση RTK unwrap.

Εκκινήστε την εφαρμογή σας, προσθέστε έναν νέο μαθητή και βεβαιωθείτε ότι όλα λειτουργούν.