Toepassing van de verzoekstatus in Redux

In eerdere lessen hebben we met behulp van aanvullende reducers beschreven wat onze applicatie moet doen, als fetchProducts tijdens het verzoek acties pending, fulfilled en rejected verstuurt. Nu kunnen we de gebruiker tonen in welk stadium de gegevensophaling zich momenteel bevindt.

Laten we onze productenapplicatie openen, en daarin het bestand ProductsList.jsx. Het eerste wat we doen, is een aparte component aanmaken voor de productkaart ProductCard. We doen dit direct na de importregels voor de functie ProductsList. We geven hem product mee als prop:

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

En nu verplaatsen we in de lege ronde haakjes van return alle code voor het weergeven van de productgegevens uit 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>
	)
}

En we verwijderen in ProductsList de overgebleven regel code. We hebben deze niet meer nodig:

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

En nu, aan het begin van de code van de functie ProductsList, maken we nog een paar variabelen aan, error en content. De eerste is voor de fout, in de tweede zullen we verschillende inhoud opslaan afhankelijk van de status van het verzoek. We doen dit vóór const dataFetch = useRef(false):

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

Nu schrijven we vóór de opdracht return van de component ProductsList een codeblok met voorwaarden, waarbij in content de ene of de andere inhoud wordt geplaatst, afhankelijk van de status. Als eerste beschrijven we de status 'in progress' - wanneer ons verzoek is verzonden. In dit geval informeren we de gebruiker dat de gegevens worden geladen:

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

Als ons laden succesvol is verlopen (we hebben dit aangeduid als 'success'), dan moeten we de lijst van verkregen producten weergeven. We geven deze weer in map met behulp van de component ProductCard, waaraan we product als prop doorgeven:

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

En de laatste status die we hebben - is 'fail'. Laten we deze ook toevoegen. We gebruiken hier de variabele error, waarin we hierboven de fout uit de state hebben opgeslagen:

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>
}

En als laatste stap vervangen we in het codeblok voor return de oude {dispProducts} door {content}.

Laten we onze applicatie starten, klik in het menu op 'Products'. Alles werkt. We zien dat ongeveer 2 seconden (zoals we op de server hebben ingesteld) onder het formulier voor het toevoegen van een product de tekst 'Products list loading ...' hangt, en daarna verschijnt de productlijst.

Open je applicatie met studenten. Open daarin het bestand StudentsList.jsx. Maak er een nieuwe component aan StudentCard. Verplaats hiernaartoe de code uit dispStudents, zoals getoond in de les.

Maak in de functie StudentsList de variabelen error en content aan. Ken aan de variabele content inhoud toe afhankelijk van de status van het verzoek. Vergeet niet om in de geretourneerde opmaak de oude dispStudents te vervangen door content.