Redux-da sorag statusyny ulanmak

Öňki sapaklarda biz goşmaça reýdýuserler ýardamynda aplikasiýamyzyň fetchProducts sorag iberende pending, fulfilled we rejected ekşenlerini iberýändigini düşündik. Indi biz ulanyja häzirki maglumat ýüklemek basgançagyny görkezip bileris.

Geliň öňki döreden önümler aplikasiýamyzy açalyň, onda ProductsList.jsx faýlyny açyň. Ilkinji etjek zadymyz, önüm kartajygy üçin aýratyn komponent döretmek ProductCard. Muny import setirlerinden soň, şol ýerde ProductsList funksiýasynyň öňünde edeliň. Prop hökmünde oňa product geçiriler:

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

Indi bolsa, return-daky boş ýuwarly ýaýlara önüm baradaky maglumatlary görkezmek üçin ähli kody dispProducts-dan geçiriler:

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

We ProductsList-da galan setiri aýyryň. Ona indi gerek däl:

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

Indi bolsa, ProductsList funksiýasynyň kodunyň başynda ýene birnäçe üýtgeýjiler döređeliň, error we content. Birinjisi biziň ýalňyşlygymyz üçin bolup, ikinjisine bolsa sorag statusyna baglylykda dürli mazmun ýazdyrarys. Muny const dataFetch = useRef(false)-dan öň edeliň:

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

Indi ProductsList komponentyň return buýrugyndan öň, şertli blok ýazalyň, content-a statusa baglylykda dürli mazmun ýazyljak. Ilkinji bolup 'in progress' statusyny düşündireris - bizim soragymyz iberilende. Bu ýagdaýda biz ulanyja maglumatlar ýüklenýändigini habar bolar:

if (productStatus === 'in progress') {
	content = <p>Önümleriň sanawy ýüklenýär ...</p>
}

Eger ýüklemek üstünlikli tamamlansa (biz muny 'success' hökmünde belleýäris), onda biz alynan önümleriň sanawyny görkezmeli. Ony map bilen ProductCard komponenti ýardamynda görkezeris, oňa prop hökmünde product geçireris:

if (productStatus === 'in progress') {
	content = <p>Önümleriň sanawy ýüklenýär ...</p>
} else if (productStatus === 'success') {
	content = products.map((product) => (
		<ProductCard key={product.id} product={product} />
	))
}

We iň soňky bar bolan statusymyz - 'fail'. Ony hem goşalyň. Bu ýerde ýokarda stateden ýalňyşlygy ýazdyran error üýtgeýjisini ulanalyň:

if (productStatus === 'in progress') {
	content = <p>Önümleriň sanawy ýüklenýär ...</p>
} else if (productStatus === 'success') {
	content = products.map((product) => (
		<ProductCard key={product.id} product={product} />
	))
} else if (productStatus === 'fail') {
	content = <div>{error}</div>
}

We iň soňky ädimde, return üçin kod blogynda köne {dispProducts}-y {content} bilen çalyşdyrarys.

Aplikasiýamyzy işledeliň, menýudan 'Products'-a tyklalyň. Hemme işleýär. Görýäris, şu ýaly 2 sekunt (serwerde bellemek ýaly) öz önüm goşmak formasyndan aşakda 'Products list loading ...' ýazgysy bar, soňra bolsa önümleriň sanawy peýda bolýar.

Okuwçylar bar aplikasiýaňyzy açyň. Onda StudentsList.jsx faýlyny açyň. Onda täze komponent dörediň StudentCard. Sapakda görkezilişi ýaly, ona kod ýazgyny dispStudents-dan geçiriň.

StudentsList funksiýasynda error we content üýtgeýjilerini dörediň. Sorag statusyna baglylykda content üýtgeýjisine mazmun ýazdyryň. Yzyna gaýtarylýan wersiýada köne dispStudents-y content bilen çalyşdyrmagy ýatdan çykarmaň.