Anzeige der Thunk-Ergebnisse in einer Komponente in Redux

In der letzten Lektion haben wir eine POST-Anfrage mit dem Thunk addProduct gesendet. Lassen Sie uns nun die Ergebnisse seiner Arbeit in der Komponente anzeigen.

Öffnen wir unsere Produktanwendung und darin die Datei NewProductForm.jsx, da diese Komponente für das Hinzufügen eines neuen Produkts verantwortlich ist. Schauen wir uns die Importzeilen an. Ersetzen wir den Import der Action productAdded durch den Import des Thunks addProduct:

import { addProduct } from './productsSlice'

Da wir im Slice den Status 'pending' der Anfrage nicht verfolgen, lassen Sie uns es so einrichten, dass der Benutzer die Schaltfläche zum Speichern des Produkts nur einmal drücken kann, da wir keine identischen wiederholten Anfragen benötigen. Dazu richten wir einen weiteren lokalen State ein:

const [requestStatus, setRequestStatus] = useState('idle')

Als nächstes schreiben wir nach den Event-Handlern und vor der Funktion onSaveProductClick Code, in dem wir prüfen, ob alle Formularfelder ausgefüllt sind und ob der Anfragestatus 'idle' ist:

const canBeSaved =
	[name, desc, price, amount, sellerId].every(Boolean) &&
	requestStatus === 'idle'

Anschließend ändern wir den Code für onSaveProductClick. Erstens wird dies eine asynchrone Funktion sein und sie wird nur ausgeführt, wenn die obige Bedingung erfüllt ist:

const onSaveProductClick = async () => {
	if (canBeSaved) {}
}

Obwohl wir im Slice den Status 'rejected' nicht verfolgen, können wir den Fehler trotzdem in der Konsole ausgeben. Dazu verwenden wir die Konstruktion try-catch. Hier werden wir auch finally hinzufügen, um nach Abschluss der Anfrage den lokalen State wieder auf 'idle' zu setzen:

const onSaveProductClick = async () => {
	if (canBeSaved) {
		try {
		} catch (err) {
			console.error('Fehler beim Speichern des Produkts: ', err)
		} finally {
			setRequestStatus('idle')
		}
	}
}

Wir haben die catch- und finally-Blöcke behandelt, lassen Sie uns den Code für den try-Block schreiben. Hier setzen wir den lokalen Status auf 'in progress', bis wir eine Antwort als Ergebnis der Thunk-Arbeit zurückerhalten, und senden dann unseren Thunk addProduct. Die Verwendung der Konstruktion try-catch in Abhängigkeit vom Antworttyp wird uns durch die RTK-Funktion unwrap ermöglicht, die sie zum zurückgegebenen Promise hinzufügt. Wenn die Anfrage erfolgreich war, setzen wir die lokalen States auf ihre Ausgangszustände zurück. Der vollständige Code für onSaveProductClick sieht dann so aus:

const onSaveProductClick = async () => {
	if (canBeSaved) {
		try {
			setRequestStatus('in progress')
			await dispatch(
				addProduct({ name, desc, price, amount, seller: sellerId })).unwrap()
			setName('')
			setDesc('')
			setPrice(0)
			setAmount(0)
			setSellerId('')
		} catch (err) {
			console.error('Fehler beim Speichern des Produkts: ', err)
		} finally {
			setRequestStatus('idle')
		}
	}
}

Starten wir unsere Anwendung und versuchen, ein neues Produkt hinzuzufügen. Wie Sie sehen, werden bei erfolgreicher Anfrage die Felder geleert und das neue Produkt zur Produktliste hinzugefügt. Schauen Sie sich auch im Browser in den Redux DevTools um und navigieren Sie durch die Tabs, betrachten Sie die Actions und wie sich Ihr State verändert.

Öffnen Sie Ihre Studentenanwendung. Öffnen Sie darin die Datei NewStudentForm.jsx. Fügen Sie einen weiteren lokalen State requestStatus hinzu, und setzen Sie ihn anfänglich auf 'idle'. Nachdem Sie sich mit den Materialien der Lektion vertraut gemacht haben, erstellen Sie die Variable canBeSaved, mit der die Schaltfläche zum Speichern der neuen Studentendaten aktiviert/deaktiviert wird, abhängig vom Wert requestStatus und der Ausgefülltheit der Felder.

Schreiben Sie asynchronen Code für onSaveStudentClick, der den Wert von requestStatus situationsabhängig ändert, den Thunk addProduct mit den Daten des neuen Studenten sendet, die Felder im Falle einer erfolgreichen Anfrage leert und einen Fehler in die Konsole ausgibt, falls er fehlschlägt, wie in der Lektion gezeigt. Verwenden Sie dazu die Konstruktion try-catch und die RTK-Funktion unwrap.

Starten Sie Ihre Anwendung, fügen Sie einen neuen Studenten hinzu und vergewissern Sie sich, dass alles funktioniert.