Menggunakan Status Permintaan dalam Redux

Dalam pelajaran sebelumnya, kami menggunakan reducer tambahan untuk menerangkan apa yang perlu dilakukan oleh aplikasi kami jika fetchProducts menghantar aksi pending, fulfilled dan rejected semasa permintaan. Sekarang kami boleh menunjukkan kepada pengguna pada peringkat mana pemuatan data sedang berlaku.

Mari buka aplikasi produk kami, dan dalamnya fail ProductsList.jsx. Perkara pertama yang akan kami lakukan ialah mencipta komponen berasingan untuk kad produk ProductCard. Kami akan lakukan ini sejurus selepas barisan import sebelum fungsi ProductsList. Kami akan hantarkan product sebagai props kepadanya:

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

Dan sekarang dalam kurungan bulat kosong return kami akan pindahkan semua kod untuk memaparkan data produk dari 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>
	)
}

Dan kami akan buangkan dalam ProductsList barisan kod yang tinggal. Ia tidak diperlukan lagi:

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

Dan sekarang pada permulaan kod fungsi ProductsList kami akan sediakan beberapa pembolehubah lagi, error dan content. Yang pertama adalah untuk ralat, yang kedua kami akan masukkan kandungan yang berbeza bergantung pada status permintaan. Kami akan lakukan ini sebelum const dataFetch = useRef(false):

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

Sekarang sebelum arahan return komponen ProductsList tuliskan blok kod dengan syarat, di mana content akan dimasukkan kandungan yang berbeza bergantung pada status. Pertama kami akan terangkan status 'in progress' - apabila permintaan kami dihantar. Dalam kes ini kami akan maklumkan kepada pengguna bahawa data sedang dimuatkan:

if (productStatus === 'in progress') {
	content = <p>Senarai produk sedang dimuatkan ...</p>
}

Jika pemuatan kami berjaya (kami menandakannya sebagai 'success'), maka kami perlu memaparkan senarai produk yang diperoleh. Kami akan paparkannya dalam map menggunakan komponen ProductCard, yang kami hantarkan product sebagai props:

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

Dan status terakhir yang kami ada - ialah 'fail'. Tambahkannya. Gunakan di sini pembolehubah error, yang kami tulis di atas ralat dari state:

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

Dan langkah terakhir, dalam blok kod untuk return kami akan gantikan {dispProducts} yang lama dengan {content}.

Jalankan aplikasi kami, klik dalam menu pada 'Products'. Semua berfungsi. Kami lihat bahawa kira-kira 2 saat (seperti yang kami tetapkan di pelayan) terdapat tulisan 'Senarai produk sedang dimuatkan ...' di bawah borang tambahan produk, dan kemudian senarai produk muncul.

Buka aplikasi pelajar anda. Buka dalamnya fail StudentsList.jsx. Cipatakan di dalamnya komponen baru StudentCard. Pindahkan kod daripadanya dispStudents, seperti yang ditunjukkan dalam pelajaran.

Ciptakan dalam fungsi StudentsList pembolehubah error dan content. Berikan pembolehubah content kandungan bergantung pada status permintaan. Jangan lupa untuk menggantikan dalam susun atur yang dipulangkan dispStudents lama dengan content.