Senden von Actions und der useDispatch-Hook in Redux

Wir haben fast alle Bestandteile für die Funktionsweise einer Redux-Anwendung implementiert. Jetzt müssen wir nur noch das Senden von Actions aus einer React-Komponente verstehen. Fangen wir an.

Öffnen Sie unsere Produktanwendung. Im Formular der Komponente NewProductForm haben wir eine Schaltfläche zum Speichern der Daten eines neuen Produkts. Lassen Sie uns einen Klick-Handler dafür einrichten. Bei einem Klick darauf soll der Handler onSaveProductClick ausgeführt werden:

<button type="button" onClick={onSaveProductClick}>
	save
</button>

Für die Erstellung eines neuen Produkts benötigen wir eine neue ID. Wir werden sie mit der allseits bekannten Bibliothek nanoid erzeugen. Übrigens, sie muss nicht installiert werden, da sie bereits im RTK-Paket enthalten ist. Fügen wir nanoid zum Import hinzu:

import { nanoid } from '@reduxjs/toolkit'

Wir erinnern uns auch, dass die einzige Möglichkeit, den State zu ändern, darin besteht, die Methode dispatch aufzurufen, die beim Store vorhanden ist, und ein Action-Objekt zu übergeben. Um an diese Methode zu gelangen, werden wir den React-Redux-Hook useDispatch verwenden. Importieren wir ihn auch:

import { useDispatch } from 'react-redux'

Im Code der Funktion NewProductForm legen wir direkt nach den Konstanten für unsere lokalen States eine Konstante dispatch für ihn an:

const dispatch = useDispatch()

Außerdem müssen wir den Action Creator productAdded importieren, den wir in der letzten Lektion erhalten haben:

import { productAdded } from './productsSlice'

Jetzt können wir die Handler-Funktion onSaveProductClick selbst schreiben. Machen wir das vor dem return-Befehl:

const onSaveProductClick = () => {}

Innerhalb der Funktion rufen wir dispatch auf, bilden das Action-Objekt, in dessen Eigenschaft payload die generierte ID, der Name, die Beschreibung, der Preis und die Menge des Produkts landen. All diese Daten entnehmen wir den lokalen States. Dabei prüfen wir zu Beginn in einer Bedingung, ob alle Felder ausgefüllt sind - nur in diesem Fall rufen wir dispatch auf. Am Ende des Funktionscodes setzen wir die lokalen States auf ihren Ausgangszustand zurück:

const onSaveProductClick = () => {
	if (name && desc && price && amount) {
		dispatch(
			productAdded({
				id: nanoid(),
				name,
				desc,
				price,
				amount
			})
		)

		setName('')
		setDesc('')
		setPrice(0)
		setAmount(0)
	}
}

Starten wir nun unsere Anwendung, geben Daten in die Formularfelder ein und drücken die Speichern-Schaltfläche. Hurra, unten auf der Seite ist ein neues Produkt erschienen. Wenn wir Redux DevTools öffnen und darin den Tab Inspector aufrufen, sehen wir, dass links neben @@INIT auch unsere Action products/productAdded erschienen ist. Auf der rechten Seite können wir auf die Tabs Action und State klicken und dabei zwischen @@INIT und products/productAdded hin- und herschalten. Jetzt sehen wir, dass unser neues Produkt hinzugefügt wird. Außerdem sehen wir im Tab Action die Action, die automatisch mit createSlice generiert wurde (klicken Sie z.B. auf Raw). Hurra: Wir mussten sie nicht von Hand schreiben.

Öffnen Sie Ihre Studenten-Anwendung und dann die Datei NewStudentForm.jsx, richten Sie einen Klick-Handler für die Speichern-Schaltfläche ein.

Schreiben Sie alle notwendigen Imports und implementieren Sie die Handler-Funktion onSaveStudentClick, indem Sie die Methode dispatch wie in der Lektion gezeigt anwenden.

Starten Sie die Anwendung, geben Sie Daten in die Formularfelder ein und klicken Sie auf die Speichern-Schaltfläche. Stellen Sie sicher, dass unten auf der Seite ein neuer Student hinzugefügt wurde.

Öffnen Sie Redux DevTools und gehen Sie die Tabs Action und State durch. Stellen Sie sicher, dass das neue Studentenobjekt hinzugefügt wird. Sehen Sie sich das Action-Objekt an, das bei Ihnen generiert wurde, und senden Sie es als Antwort auf diese Aufgabe.