Gebruik van Aanversoekstatus in Redux

In vorige lesse het ons met behulp van bykomende reducers beskryf wat ons toepassing moet doen, as fetchProducts aksies pending, fulfilled en rejected stuur tydens 'n versoek. Nou kan ons aan die gebruiker wys op watter stadium data laai tans is.

Kom ons maak ons produktoepassing oop, en daarin lêer ProductsList.jsx. Die eerste ding wat ons sal doen, is om 'n aparte komponent vir die produkkaart ProductCard te skep. Doen dit dadelik na die invoerlyne voor die funksie ProductsList. As 'n prop gee ons dit product:

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

En nou in die leë ronde hakies return skuif ons al die kode om produkdata te vertoon uit dispProducts oor:

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 verwyder in ProductsList die oorblywende lyn kode. Ons het dit nie meer nodig nie:

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

En nou aan die begin van die funksie ProductsList se kode skep ons nog 'n paar veranderlikes, error en content. Die eerste sal vir die fout wees, in die tweede sal ons die een of ander inhoud aflê afhangende van die aanversoekstatus. Doen dit voor const dataFetch = useRef(false):

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

Nou voor die opdrag return van die komponent ProductsList skryf ons 'n blok kode met voorwaardes, waarvolgens in content die een of ander inhoud gestoor sal word afhangende van die status. Eerstens beskryf ons status 'in progress' - wanneer ons versoek gestuur is. In hierdie geval laat ons die gebruiker weet dat data laai:

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

As ons laai suksesvol was (ons het dit aangedui as 'success'), dan moet ons die lys van verkrygte produkte vertoon. Vertoon dit in map met behulp van die komponent ProductCard, aan wie ons as prop product sal gee:

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 die laaste status wat ons het - is 'fail'. Voeg dit ook by. Gebruik hier die veranderlike error, waarin ons bo die fout van die staat geskryf het:

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 die laaste stap is om in die blok kode vir return die ou {dispProducts} te vervang met {content}.

Laat ons toepassing loop, klik in die menu op 'Products'. Alles werk. Ons sien dat ongeveer 2 sekondes (soos ons op die bediener gestel het) onder die vorm byvoeging van produk hang die inskrywing 'Products list loading ...', en dan verskyn die produklys.

Maak jou studentetoepassing oop. Maak daarin lêer StudentsList.jsx oop. Skep daarin 'n nuwe komponent StudentCard. Skuif die kode uit dispStudents daarin oor, soos gewys in die les.

Skep in die funksie StudentsList veranderlikes error en content. Ken aan veranderlike content inhoud toe afhangende van die aanversoekstatus. Moenie vergeet om in die teruggestuurde opmaak die ou dispStudents met content te vervang nie.