Penerapan Status Permintaan di Redux

Pada pelajaran sebelumnya kita dengan menggunakan reducer tambahan mendeskripsikan apa yang harus dilakukan aplikasi kita, jika fetchProducts mengirim saat permintaan action pending, fulfilled dan rejected. Sekarang kita dapat menunjukkan kepada pengguna pada tahap mana saat ini pengunduhan data.

Mari buka aplikasi kita dengan produk, dan di dalamnya file ProductsList.jsx. Pertama, yang akan kita lakukan adalah membuat komponen terpisah untuk kartu produk ProductCard. Lakukan ini segera setelah baris impor sebelum fungsi ProductsList. Sebagai props kita berikan kepadanya product:

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

Dan sekarang di dalam tanda kurung bundar kosong return pindahkan semua kode untuk menampilkan 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 hapus di ProductsList baris kode yang tersisa. Itu tidak kita perlukan lagi:

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

Dan sekarang di awal kode fungsi ProductsList buat beberapa variabel lagi, error dan content. Yang pertama untuk error, ke dalam yang kedua kita akan menuliskan konten tertentu tergantung pada status permintaan. Lakukan ini sebelum const dataFetch = useRef(false):

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

Sekarang sebelum perintah return komponen ProductsList tulis blok kode dengan kondisi, di mana ke dalam content akan dimasukkan konten tertentu tergantung pada status. Pertama kita akan mendeskripsikan status 'in progress' - ketika permintaan kita terkirim. Dalam hal ini kita akan memberi tahu pengguna bahwa data sedang diunduh:

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

Jika pengunduhan kita berhasil (kita menandainya sebagai 'success'), maka kita perlu menampilkan daftar produk yang didapat. Tampilkan dalam map dengan menggunakan komponen ProductCard, yang kita berikan props 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} />
	))
}

Dan status terakhir yang kita miliki - adalah 'fail'. Tambahkan juga. Gunakan di sini variabel error, yang telah kita tulis di atas error dari state:

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

Dan langkah terakhir kita di blok kode untuk return ganti {dispProducts} lama dengan {content}.

Jalankan aplikasi kita, klik di menu pada 'Products'. Semua berfungsi. Kita lihat, bahwa sekitar 2 detik (seperti yang kita atur di server) di bawah form penambahan produk terlihat tulisan 'Products list loading ...', dan kemudian muncul daftar produk.

Buka aplikasi Anda dengan siswa. Buka di dalamnya file StudentsList.jsx. Buat di dalamnya komponen baru StudentCard. Pindahkan ke dalamnya kode dari dispStudents, seperti yang ditunjukkan dalam pelajaran.

Buat dalam fungsi StudentsList variabel error dan content. Berikan variabel content konten tergantung pada status permintaan. Jangan lupa untuk mengganti di markup yang dikembalikan dispStudents lama dengan content.