Produktbearbeitungsseite im Browser in Redux

In der letzten Lektion haben wir ein Formular für die Produktbearbeitung erstellt. Lassen Sie uns dafür eine Route einrichten.

Öffnen wir unsere Produktanwendung, und darin die Datei App.jsx und fügen wir ein weiteres Kind-Route-Objekt in das Array für die Eigenschaft children hinzu (vergessen Sie nicht, EditProductForm zu importieren):

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

Außerdem müssen wir für den Übergang zum Bearbeitungsformular einen Link erstellen. Öffnen wir dazu ProductPage.jsx und platzieren wir diesen Link in dem zurückgegebenen Markup nach dem letzten Absatz mit der Produktanzahl und vor dem schließenden Div:

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

Importieren Sie außerdem Link aus der Router-Bibliothek:

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

Starten wir unsere Anwendung und klicken wir auf die Schaltfläche zur Ansicht eines beliebigen Produkts. Versuchen wir, es zu bearbeiten und kehren wir zurück zur Produktliste, indem wir auf den Link 'Products' im Menü links klicken. Auch in den Redux DevTools können Sie die neue Aktion productUpdated sehen und die Änderungen des Produktobjekts im Store betrachten.

Öffnen Sie Ihre Studentenanwendung. Fügen Sie in der Datei App.jsx eine weitere Kind- Route zur Bearbeitung der Studentendaten hinzu.

Fügen Sie ein Link-Element im Markup auf der Studentenseite hinzu, um zur Seite zur Bearbeitung seiner Daten zu gelangen.

Starten Sie Ihre Anwendung, versuchen Sie, die Daten eines beliebigen Studenten zu bearbeiten. Achten Sie auf die Adresszeile des Browsers, wenn Sie sich auf der Bearbeitungsseite befinden. Sehen Sie sich die Änderungen in den Redux DevTools des Browsers an.