Užklausos būsenos panaudojimas Redux

Ankstesnėse pamokose mes naudodami papildomus reduktorius aprašėme, ką mūsų programai daryti, jei fetchProducts siunčia užklausos metu veiksmus pending, fulfilled ir rejected. Dabar mes galime parodyti vartotojui, kokiame etape šiuo metu yra duomenų įkėlimas.

Atidarykime mūsų programą su produktais, o joje failą ProductsList.jsx. Pirmiausia, ką mes padarysime, tai sukursime atskirą komponentą produkto kortelei ProductCard. Padarykime tai iškart po importų eilučių prieš funkciją ProductsList. Kaip propsą perduosime jam product:

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

O dabar į tuščius apvaliuosius skliaustus return perkelsime visą kodą produkto duomenų atvaizdavimui iš 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>
	)
}

Ir pašalinsime ProductsList likusią eilutę kodo. Ji mums daugiau nereikalinga:

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

O dabar kodo funkcijos ProductsList pradžioje įvesime dar porą kintamųjų, error ir content. Pirmasis mums bus klaidai, antrajame mes įrašysime tą ar kitą turinį priklausomai nuo užklausos būsenos. Padarykime tai prieš const dataFetch = useRef(false):

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

Dabar prieš komandą return komponento ProductsList parašysime kodo bloką su sąlygomis, kuriomis į content bus įrašomas tas ar kitas turinys priklausomai nuo būsenos. Pirmuoju aprašysime būseną 'in progress' - kai mūsų užklausa išsiųsta. Šiuo atveju mes pranešime vartotojui, kad vyksta duomenų įkėlimas:

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

Jei mūsų įkėlimas pavyko sėkmingai (mes žymėjome tai kaip 'success'), tai mums reikia išvesti gautų produktų sąrašą. Išveskime jį map pagalba naudodami komponentą ProductCard, kuriam propsu perduosime product:

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

Ir paskutinė būsena, kurią mes turime - tai 'fail'. Pridėkime ir ją. Čia panaudokime kintamąjį error, į kurį mes aukščiau įrašėme klaidą iš būsenos:

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

Ir paskutiniu žingsniu mes kodo bloke return pakeisime seną {dispProducts} į {content}.

Paleiskime mūsų programą, spustelėkime meniu 'Products'. Viskas veikia. Matome, kad maždaug 2 sekundes (kaip mes ir nustatėme serveryje) pas mus po forma produkto pridėjimo kabo užrašas 'Products list loading ...', o po to atsiranda produktų sąrašas.

Atidarykite savo programą su studentais. Atidarykite joje failą StudentsList.jsx. Sukurkite jame naują komponentą StudentCard. Perkelkite į jį kodą iš dispStudents, kaip parodyta pamokoje.

Sukurkite funkcijoje StudentsList kintamuosius error ir content. Priskirkite kintamajam content turinį priklausomai nuo užklausos būsenos. Ne pamirškite pakeisti grąžinamoje išvaizdoje seną dispStudents į content.