Pyyntötilan käyttö Reduxissa

Aikaisemmissa oppitunneissa kuvasimme lisäreducereiden avulla, mitä sovelluksemme tekee, jos fetchProducts lähettää pyynnön yhteydessä actionit pending, fulfilled ja rejected. Nyt voimme näyttää käyttäjälle, millä vaiheessa tietojen lataus tällä hetkellä on.

Avataan tuotesovelluksemme ja sen tiedosto ProductsList.jsx. Ensimmäiseksi luomme erillisen komponentin tuotekortille ProductCard. Teemme tämän heti import-rivien jälkeen ennen funktiota ProductsList. Annamme sille propsina product:

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

Ja nyt siirrämme tyhjiin pyöreisiin sulkeisiin return kaiken tuotetietojen näyttämiseen tarkoitetun koodin kohteesta 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>
	)
}

Ja poistamme ProductsList:stä jäljelle jääneen koodirivin. Sitä ei enää tarvita:

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

Ja nyt funktion ProductsList koodin alussa luomme muutaman muuttujan, error ja content. Ensimmäinen on virhettä varten, toiseen tallennamme eri sisältöä pyynnön tilasta riippuen. Teemme tämän ennen const dataFetch = useRef(false):

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

Nyt ennen komponentin ProductsList return -komentoa kirjoitetaan koodilohko ehdoilla, joilla content:iin tallennetaan erilaista sisältöä tilasta riippuen. Ensimmäisenä kuvailemme tilan 'in progress' - kun pyyntömme on lähetetty. Tässä tapauksessa ilmoitamme käyttäjälle, että tietoja ladataan:

if (productStatus === 'in progress') {
	content = <p>Tuotelistaa ladataan ...</p>
}

Jos lataus onnistui (merkitsimme sitä 'success':ina), meidän on näytettävä haettujen tuotteiden lista. Näytämme sen map:lla käyttäen ProductCard -komponenttia, jolle annamme propksena product:

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

Ja viimeinen tila, joka meillä on - se on 'fail'. Lisätään se myös. Käytetään tässä muttujaa error, johon yllä kirjoitimme virheen statesta:

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

Ja viimeisenä vaiheena return:ia varten olevassa koodilohkossa korvaamme vanhan {dispProducts} kohteella {content}.

Käynnistetään sovelluksemme, klikataan valikossa kohtea 'Products'. Kaikki toimii. Näemme, että noin 2 sekunnin ajan (kuten palvelimella asetimme) lomakkeen alla on teksti 'Tuotelistaa ladataan ...', jonka jälkeen tuotelista ilmestyy.

Avaa opiskelijasovelluksesi. Avaa sen tiedosto StudentsList.jsx. Luo siihen uusi komponentti StudentCard. Siirrä siihen koodi kohteesta dispStudents, kuten oppitunnilla näytetään.

Luo funktiossa StudentsList muttujat error ja content. Anna muttujalle content sisältöä pyynnön tilasta riippuen. Älä unohda korvata palautetussa merkinnässä vanha dispStudents kohteella content.