Σελίδα επεξεργασίας προϊόντος στο πρόγραμμα περιήγησης στο Redux

Στο προηγούμενο μάθημα δημιουργήσαμε μια φόρμα για την επεξεργασία προϊόντος. Ας προσθέσουμε μια διαδρομή γι' αυτήν.

Ας ανοίξουμε την εφαρμογή μας με τα προϊόντα, και σε αυτή το αρχείο App.jsx και ας προσθέσουμε ακόμη ένα αντικείμενο θυγατρικής διαδρομής στον πίνακα για την ιδιότητα children (μην ξεχάσετε να εισαγάγετε το EditProductForm):

{
	path: '/editProduct/:productId',
	element: <EditProductForm />,
},

Επίσης, για τη μετάβαση στη φόρμα επεξεργασίας πρέπει να δημιουργήσουμε έναν σύνδεσμο. Για αυτό ας ανοίξουμε το ProductPage.jsx και ας τοποθετήσουμε αυτόν τον σύνδεσμο στην επιστρεφόμενη σήμανση μετά την τελευταία παράγραφο με την ποσότητα του προϊόντος και πριν από το κλείσιμο του div:

<Link to={`/editProduct/${product.id}`} className="link-btn">
	edit
</Link>

Επίσης, εισάγουμε το Link από τη βιβλιοθήκη δρομολογητή:

import { Link } from 'react-router-dom'

Ας εκκινήσουμε την εφαρμογή μας και ας κλικάρουμε στο κουμπί προβολής ενός προϊόντος. Ας προσπαθήσουμε να το επεξεργαστούμε και ας επιστρέψουμε πίσω στη λίστα προϊόντων, κάνοντας κλικ στο σύνδεσμο 'Products' στο αριστερό μενού. Επίσης, στα Redux DevTools μπορείτε να δείτε μια νέα ενέργεια productUpdated και να δείτε τις αλλαγές του αντικειμένου προϊόντος στο store.

Ανοίξτε την εφαρμογή σας με τους μαθητές. Στο αρχείο App.jsx προσθέστε ακόμη μια θυγατρική διαδρομή για την επεξεργασία δεδομένων μαθητή.

Προσθέστε το στοιχείο Link στη σήμανση στη σελίδα του μαθητή για μετάβαση στην σελίδα επεξεργασίας των δεδομένων του.

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