Φόρμα για Επεξεργασία Δεδομένων στο Redux

Τώρα έχουμε έναν reducer για αλλαγή δεδομένων στο store. Σε αυτό το μάθημα θα δημιουργήσουμε μια φόρμα, με την οποία θα μπορούμε να επεξεργαζόμαστε τα δεδομένα του προϊόντος.

Ας ανοίξουμε την εφαρμογή προϊόντων μας και ας δημιουργήσουμε στο φάκελο products το αρχείο EditProductForm.jsx. Η δημιουργία του component EditProductForm θα είναι ανάλογη με το NewProductForm, με εξαίρεση κάποιες διαφορές, στις οποίες θα εστιάζουμε. Γι' αυτό αντιγράψτε πλήρως τον κώδικα από το NewProductForm.jsx και επικολλήστε τον στο δημιουργημένο αρχείο EditProductForm.jsx. Τώρα ας ξεκινήσουμε με τη σειρά.

Αφαιρέστε από το import το nanoid, εδώ δεν χρειάζεται να δημιουργήσουμε id. Αντικαταστήστε το import του productAdded με το productUpdated, αφού εδώ θα χρησιμοποιήσουμε το action για ενημέρωση, και όχι για προσθήκη προϊόντος.

Στη συνέχεια αλλάξτε το όνομα της συνάρτησης του component μας από NewProductForm σε EditProductForm.

Πριν ορίσουμε τα local state στη συνάρτηση EditProductForm για το name, desc, price και amount, ας εισάγουμε μερικές ακόμη γραμμές κώδικα. Όπως αναφέραμε νωρίτερα, εδώ δεν χρειάζεται να δημιουργήσουμε id. Τώρα το καθήκον μας είναι να το πάρουμε από τα δεδομένα του προϊόντος που αλλάζει. Το έχουμε ήδη κάνει αυτό κατά τη δημιουργία μιας ξεχωριστής σελίδας για το προϊόν. Λοιπόν, ας πάρουμε το id χρησιμοποιώντας το hook useParams, και στη συνέχεια βρείτε το προϊόν που χρειαζόμαστε, χρησιμοποιώντας το hook useSelector (μην ξεχάσετε να εισάγετε και τα δύο hooks στην αρχή του αρχείου):

let params = useParams()
const { productId } = params

const product = useSelector((state) =>
	state.products.find((product) => product.id === productId)
)

Μετά από αυτό, αλλάξτε το block με τη δήλωση των local state. Τώρα πρέπει ως αρχική τιμή να ορίσουμε τα δεδομένα του προϊόντος που λήφθηκαν από το store. Έτσι θα μοιάζει το πρώτο state, μετατρέψτε τα υπόλοιπα τρία μόνοι σας:

const [name, setName] = useState(product.name)

Μετά την ανάθεση της μεταβλητής για το useDispatch ας προσθέσουμε ακόμη μια γραμμή κώδικα αυτή τη φορά για το hook useNavigate. Θα το χρησιμοποιήσουμε για επιστροφή στη σελίδα του προϊόντος, όταν ο χρήστης αποθηκεύσει τις αλλαγές που έγιναν στη φόρμα:

const navigate = useNavigate()

Επίσης, εισάγετε αυτό το hook στην αρχή του αρχείου:

import { useNavigate, useParams } from 'react-router-dom'

Στη συνέχεια, ακολουθούν οι χειριστές για τα πεδία εισαγωγής. Και μετά από αυτούς πρέπει να διορθώσουμε τη συνάρτηση onSaveProductClick. Τώρα σε αυτή, upon click, θα στείλουμε το action productUpdated με το id που λήφθηκε και τα τροποποιημένα δεδομένα σε μορφή αντικειμένου. Μετά θα προσθέσουμε το navigate, για μετάβαση στη σελίδα του τροποποιημένου προϊόντος:

const onSaveProductClick = () => {
	if (name && desc && price && amount) {
		dispatch(
			productUpdated({
				id: productId,
				name,
				desc,
				price,
				amount,
			})
		);
		
		navigate(`/products/${productId}`);
	}
}

Απομένει μόνο στην επιστρεφόμενη markup να βρούμε τη γραμμή:

<h2>Add a New Product</h2>

Και να την αντικαταστήσουμε με:

<h2>Edit Product</h2>

Ανοίξτε την εφαρμογή σας με τους μαθητές. Δημιουργήστε το αρχείο EditStudentForm.jsx κατ' αναλογία με το NewStudentForm.jsx. Κάντε σε αυτό τις αλλαγές, όπως φαίνεται στο μάθημα.