Senden eines Thunks aus einer Komponente in Redux

In dieser Lektion senden wir einen Thunk zum Abrufen der Produkte aus der React-Komponente ProductsList.

Lassen Sie uns nun unsere Produktanwendung öffnen, und darin die Datei ProductsList.jsx. Zuerst fügen wir den Thunk fetchProducts, den wir erstellt haben, zum Import hinzu:

import { selectAllProducts, fetchProducts } from './productsSlice'

Wir benötigen auch den Hook useDispatch um unseren Action Creator zu senden, und den Hook useEffect, weil wir hier einen Nebeneffekt haben, da wir es mit dem Netzwerk zu tun haben, was schon eine externe API ist:

import { useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'

Jetzt fügen wir in der ersten Zeile des Codes der Funktion ProductsList, vor der Deklaration von products, hinzu:

const dispatch = useDispatch()

Als nächstes werden wir beim Abrufen der Produkte aus dem State auch den Status der Anfrage extrahieren:

const products = useSelector(selectAllProducts)
const productStatus = useSelector((state) => state.products.status)

Und direkt danach teilen wir React mit Hilfe des Hooks useEffect mit, dass wir nach dem Rendern der Komponente die Produkte abrufen müssen. Hier brauchen wir den Anfragestatus, denn es ist wichtig, dass eine solche Anfrage nur einmal gesendet wird:

useEffect(() => {
	if (productStatus === 'idle') {
		dispatch(fetchProducts())
	}
}, [productStatus, dispatch])

Jetzt können wir unsere Anwendung starten, darin auf 'Products' im Menü links klicken. Die Produktliste werden wir noch nicht sehen, aber wenn wir in unsere Redux DevTools gehen, erscheinen auf der linken Seite des Fensters die automatisch generierten (wie ich in der letzten Lektion sagte) Actions products/fetchProducts/pending und fulfilled. Lassen Sie uns nun auf den Action products/fetchProducts/fulfilled und sein Feld payload klicken - hier ist unsere Produktliste! Hurra, alle unsere Glieder in der Kette - Server, Datenbank, Client und die Redux-Anwendung - arbeiten reibungslos und gemeinsam. Übrigens, wie Sie hier sehen, gibt es auch eine meta-Eigenschaft, in der wir den Status der Anfrage sehen.

Achten wir auf noch eine Sache, bei Ihnen kann es vorkommen, dass pending und, folglich, fulfilled zweimal angezeigt werden. Wenn das so ist, seien Sie nicht beunruhigt, wir werden später darüber sprechen.

Öffnen Sie Ihre Studentenanwendung. Öffnen Sie darin die Datei StudentsList.jsx. Importieren Sie die notwendigen Hooks und den Thunk gemäß dem Material aus der Lektion.

Indem Sie die Materialien der Lektion studieren, rufen Sie den Anfragestatus studentStatus ab, und senden Sie dann, unter Verwendung von useEffect, den fetchStudents nur unter der Bedingung, dass der Wert von studentStatus - 'idle' ist.

Starten Sie Ihre Anwendung, klicken Sie im Menü der Anwendung links auf 'Students', und starten Sie dann die Browsererweiterung Redux DevTools, wie in dieser Lektion sollten Sie die Actions mit pending und fulfilled sehen (und darin payload mit den Studenten). Erkunden Sie die Tabs der Erweiterung.