การใช้งานสถานะของคำขอใน Redux

ในบทเรียนที่ผ่านมา เราใช้ reducer เพิ่มเติมเพื่ออธิบายว่าแอปพลิเคชันของเราควรทำอย่างไร หาก fetchProducts ส่ง action pending, fulfilled และ rejected ระหว่างการร้องขอ ตอนนี้เราสามารถแสดงผู้ใช้ได้ว่าขณะนี้การโหลดข้อมูลอยู่ในขั้นตอนใด

มาเปิดแอปพลิเคชันผลิตภัณฑ์ของเรา และในนั้นเปิดไฟล์ ProductsList.jsx สิ่งแรกที่เราจะทำคือสร้างคอมโพเนนต์แยกสำหรับการ์ดผลิตภัณฑ์ ProductCard เราจะทำสิ่งนี้ทันทีหลังจากบรรทัดนำเข้า ก่อนฟังก์ชัน ProductsList โดยส่ง product เป็น props ให้กับมัน:

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

และตอนนี้ในวงเล็บกลมเปล่า return ให้ย้ายโค้ดทั้งหมดสำหรับแสดงข้อมูลผลิตภัณฑ์จาก 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>
	)
}

และลบบรรทัดโค้ดที่เหลือใน ProductsList ออก เราไม่ต้องการมันอีกแล้ว:

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

และตอนนี้ในตอนต้นของโค้ดฟังก์ชัน ProductsList ให้สร้างตัวแปรอีกสองสามตัวคือ error และ content ตัวแรกจะเป็นสำหรับข้อผิดพลาด ในตัวที่สองเราจะเขียนเนื้อหาต่างๆ ขึ้นอยู่กับสถานะของคำขอ เราจะทำสิ่งนี้ก่อน const dataFetch = useRef(false):

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

ตอนนี้ก่อนคำสั่ง return ของคอมโพเนนต์ ProductsList ให้เขียนบล็อกโค้ดที่มีเงื่อนไข ซึ่งใน content จะมีการบันทึกเนื้อหาต่างๆ ขึ้นอยู่กับสถานะ สิ่งแรกที่เราจะอธิบายคือสถานะ 'in progress' - เมื่อคำขอของเราถูกส่ง ในกรณีนี้เราจะแจ้งผู้ใช้ว่ากำลังโหลดข้อมูล:

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

หากการโหลดของเราสำเร็จ (เราได้ระบุว่าเป็น 'success') เราจำเป็นต้องแสดงรายการผลิตภัณฑ์ที่ได้รับ เราจะแสดงมันใน map โดยใช้คอมโพเนนต์ ProductCard ซึ่งเราจะส่ง product เป็น props ให้:

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

และสถานะสุดท้ายที่เรามีคือ 'fail' เพิ่มมันเข้าไปด้วย เราใช้ตัวแปร error ที่เราบันทึกข้อผิดพลาดจาก 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>
}

และขั้นตอนสุดท้ายเราในบล็อกโค้ดสำหรับ return ให้เปลี่ยน {dispProducts} เก่าเป็น {content}

มาเรียกใช้แอปพลิเคชันของเรา คลิกที่ 'Products' ในเมนู ทุกอย่างทำงานได้ เราจะเห็นว่าประมาณ 2 วินาที (ตามที่เราตั้งไว้บนเซิร์ฟเวอร์) มีข้อความ 'Products list loading ...' แสดงอยู่ใต้ฟอร์มเพิ่มผลิตภัณฑ์ จากนั้นรายการผลิตภัณฑ์ก็จะปรากฏขึ้น

เปิดแอปพลิเคชันนักเรียนของคุณ เปิดไฟล์ StudentsList.jsx ในนั้น สร้างคอมโพเนนต์ใหม่ StudentCard ในนั้น ย้ายโค้ดจาก dispStudents ไปไว้ในนั้น ตามที่แสดงในบทเรียน

สร้างตัวแปร error และ content ในฟังก์ชัน StudentsList กำหนดค่าให้กับตัวแปร content ขึ้นอยู่กับสถานะของคำขอ อย่าลืมเปลี่ยน dispStudents เก่าใน markup ที่ส่งคืนเป็น content