Formular zur Datenbearbeitung in Redux

Jetzt haben wir einen Reducer, um Daten im Store zu ändern. In dieser Lektion erstellen wir ein Formular, mit dem wir Produktdaten bearbeiten können.

Lassen Sie uns unsere Produktanwendung öffnen und in dem Ordner products die Datei EditProductForm.jsx erstellen. Die Erstellung der Komponente EditProductForm wird analog zu NewProductForm sein, mit Ausnahme einiger Unterschiede, auf die wir näher eingehen werden. Deshalb kopieren Sie den vollständigen Code von NewProductForm.jsx und fügen Sie ihn in die erstellte Datei EditProductForm.jsx ein. Jetzt fangen wir der Reihe nach an.

Entfernen Sie den Import von nanoid, hier brauchen wir keine id zu generieren. Ersetzen Sie den Import von productAdded durch productUpdated, denn hier werden wir die Action für die Aktualisierung verwenden, nicht für das Hinzufügen eines Produkts.

Als nächstes ändern wir den Namen unserer Komponentenfunktion von NewProductForm auf EditProductForm.

Bevor wir lokale States in der Funktion EditProductForm für name, desc, price und amount anlegen, lassen Sie uns noch ein paar Codezeilen einfügen. Wie wir bereits erwähnt haben, brauchen wir hier keine id zu generieren. Jetzt ist unsere Aufgabe, sie aus den Daten des zu ändernden Produkts zu erhalten. Das haben wir bereits getan, als wir die eigene Seite für ein Produkt erstellt haben. Also, holen wir uns die id mit dem Hook useParams, und finden dann das gewünschte Produkt mit dem Hook useSelector (vergessen Sie nicht, beide Hooks am Anfang der Datei zu importieren):

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

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

Danach ändern wir den Block mit der Deklaration der lokalen States. Jetzt müssen wir als Anfangswert die aus dem Store erhaltenen Produktdaten setzen. So wird der erste State aussehen, ändern Sie die drei verbleibenden bitte selbst:

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

Nach der Zuweisung der Variable für useDispatch lassen Sie uns noch eine Codezeile diesmal für den Hook useNavigate einfügen. Wir werden ihn verwenden, um zur Produktseite zurückzukehren, wenn der Benutzer die im Formular vorgenommenen Änderungen speichert:

const navigate = useNavigate()

Importieren Sie diesen Hook auch am Anfang der Datei:

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

Als nächstes folgen die Handler für die Eingabefelder. Und danach müssen wir die Funktion onSaveProductClick anpassen. Jetzt werden wir darin beim Klick die Action productUpdated mit der erhaltenen id und den geänderten Daten als Objekt versenden. Danach fügen wir unser navigate hinzu, um zur Seite des geänderten Produkts zu wechseln:

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

Es bleibt nur noch, in unserem zurückgegebenen Markup die Zeile zu finden:

<h2>Add a New Product</h2>

Und sie zu ersetzen durch:

<h2>Edit Product</h2>

Öffnen Sie Ihre Studentenanwendung. Erstellen Sie eine Datei EditStudentForm.jsx nach Analogie zu NewStudentForm.jsx. Nehmen Sie die Änderungen vor, wie in der Lektion gezeigt.