Verwendung des Anforderungsstatus in Redux

In vorherigen Lektionen haben wir mit zusätzlichen Reducern beschrieben, was unsere Anwendung tun soll, wenn fetchProducts bei einer Anfrage die Actions pending, fulfilled und rejected sendet. Jetzt können wir dem Benutzer anzeigen, in welcher Phase der Datendownload sich aktuell befindet.

Lassen Sie uns unsere Produktanwendung öffnen, und darin die Datei ProductsList.jsx. Als Erstes erstellen wir eine separate Komponente für die Produktkarte ProductCard. Wir tun dies direkt nach den Importzeilen vor der Funktion ProductsList. Als Prop übergeben wir ihm product:

const ProductCard = ({ product }) => {
	return ()
}

Und nun in die leeren runden Klammern return übertragen wir den gesamten Code zur Anzeige der Produktdaten aus dispProducts:

const ProductCard = ({ product }) => {
	return (
		<div key={product.id} className="product-excerpt">
			<h3>{product.name}</h3>
			<SellerOfProd sellerId={product.seller} />
			<p>{product.desc.substring(0, 100)}</p>
			<UserReactions product={product} />
			<Link to={`/products/${product.id}`} className="link-btn">
				view
			</Link>
		</div>
	)
}

Und entfernen wir in ProductsList die verbliebene Codezeile. Sie wird nicht mehr benötigt:

const dispProducts = products.map((product) => ())

Und nun am Anfang des Codes der Funktion ProductsList legen wir noch ein paar weitere Variablen an, error und content. Die erste wird für den Fehler verwendet, in die zweite werden wir je nach Anforderungsstatus den einen oder anderen Inhalt schreiben. Wir tun dies vor const dataFetch = useRef(false):

const error = useSelector((state) => state.products.error)
let content

Nun schreiben wir vor dem Befehl return der Komponente ProductsList einen Codeblock mit Bedingungen, unter denen in content je nach Status der eine oder andere Inhalt eingetragen wird. Zuerst beschreiben wir den Status 'in progress' - wenn unsere Anfrage gesendet wurde. In diesem Fall teilen wir dem Benutzer mit, dass die Daten geladen werden:

if (productStatus === 'in progress') {
	content = <p>Products list loading ...</p>
}

Wenn unser Download erfolgreich war (wir haben dies als 'success' bezeichnet), dann müssen wir die Liste der erhaltenen Produkte ausgeben. Wir geben sie in map mit Hilfe der Komponente ProductCard aus, der wir product als Prop übergeben:

if (productStatus === 'in progress') {
	content = <p>Products list loading ...</p>
} else if (productStatus === 'success') {
	content = products.map((product) => (
		<ProductCard key={product.id} product={product} />
	))
}

Und der letzte Status, den wir haben - das ist 'fail'. Fügen wir auch diesen hinzu. Wir verwenden hier die Variable error, in die wir oben den Fehler aus dem State geschrieben haben:

if (productStatus === 'in progress') {
	content = <p>Products list loading ...</p>
} else if (productStatus === 'success') {
	content = products.map((product) => (
		<ProductCard key={product.id} product={product} />
	))
} else if (productStatus === 'fail') {
	content = <div>{error}</div>
}

Und im letzten Schritt ersetzen wir im Codeblock für return das alte {dispProducts} durch {content}.

Starten wir unsere Anwendung, klicken wir im Menü auf 'Products'. Alles funktioniert. Wir sehen, dass für etwa 2 Sekunden (wie wir es auch auf dem Server eingestellt haben) unter dem Formular zum Hinzufügen eines Produkts die Aufschrift 'Products list loading ...' hängt, und dann erscheint die Produktliste.

Öffnen Sie Ihre Studentenanwendung. Öffnen Sie darin die Datei StudentsList.jsx. Erstellen Sie darin eine neue Komponente StudentCard. Übertragen Sie den Code aus dispStudents hinein, wie in der Lektion gezeigt.

Erstellen Sie in der Funktion StudentsList die Variablen error und content. Weisen Sie der Variable content den Inhalt in Abhängigkeit vom Anforderungsstatus zu. Vergessen Sie nicht, in dem zurückgegebenen Markup das alte dispStudents durch content zu ersetzen.