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

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

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

products/ProductsList.jsxconst ProductCard = ({ product }) => {
  return ()
}

และตอนนี้ในวงเล็บกลมเปล่า return ให้ย้ายโค้ดทั้งหมดสำหรับแสดงข้อมูลผลิตภัณฑ์จาก dispProducts:

products/ProductsList.jsxconst 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 ออก เราไม่ต้องการมันอีกแล้ว:

products/ProductsList.jsxconst dispProducts = products.map((product) => ())

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

products/ProductsList.jsxconst error = useSelector((state) => state.products.error)
let content

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

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

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

products/ProductsList.jsxif (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 ไว้ข้างต้น:

products/ProductsList.jsxif (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 ...' แสดงอยู่ใต้ฟอร์มเพิ่มผลิตภัณฑ์ จากนั้นรายการผลิตภัณฑ์ก็จะปรากฏขึ้น