การสร้างการอัปเดตเชิงคาดการณ์ด้วยตนเอง

การอัปเดตแบบคาดการณ์ผลสำเร็จด้วยตนเองเริ่มจากสถานะในเครื่องขององค์ประกอบที่เริ่มต้นด้วยข้อมูลจากเซิร์ฟเวอร์: const [items, setItems] = useState(serverItems) สถานะในเครื่องนี้คือสิ่งที่คุณนำมาแสดงผล และเป็นสิ่งที่คุณจะเปลี่ยนแปลงแบบคาดการณ์ผลสำเร็จ คุณ NOT ควรเปลี่ยนแปลงข้อมูลที่ดึงจากเซิร์ฟเวอร์โดยตรง แต่ควรเก็บสำเนาในเครื่องที่คุณควบคุมได้

เมื่อผู้ใช้เริ่มการเปลี่ยนแปลงข้อมูล (คลิก "เพิ่ม", "ถูกใจ" หรือ "ลบ") ให้ดำเนินการอัปเดตสถานะทันทีก่อนเรียกส่วนติดต่อโปรแกรม: setItems(prev => [...prev, newItem]) ส่วนติดต่อผู้ใช้จะแสดงการเปลี่ยนแปลงทันที หลังจากอัปเดตนี้แล้วเท่านั้นจึงค่อยส่งคำขอเครือข่ายจริง

ก่อนทำการอัปเดตแบบคาดการณ์ผลสำเร็จ ให้บันทึกสถานะปัจจุบันไว้: const previousItems = items ภาพสถานะนี้คือเป้าหมายสำหรับการย้อนกลับ หากการเรียกส่วนติดต่อโปรแกรมล้มเหลว คุณจะกู้คืนค่านี้ ให้เก็บค่าไว้ในตัวแปร (ไม่ใช่สถานะ) เพราะคุณต้องใช้ค่านี้ตลอดระยะเวลาที่การเปลี่ยนแปลงข้อมูลยังรอดำเนินการเท่านั้น

หลังจากอัปเดตแบบคาดการณ์ผลสำเร็จแล้ว ให้ส่งคำขอไปยังส่วนติดต่อโปรแกรมแบบอะซิงโครนัส ครอบการดำเนินการนี้ด้วยการจัดการข้อผิดพลาด เมื่อสำเร็จ คุณอาจดึงข้อมูลใหม่เพื่อให้ตรงกับสถานะของเซิร์ฟเวอร์ หรือเชื่อถือสถานะแบบคาดการณ์ผลสำเร็จได้หากเซิร์ฟเวอร์จะส่งข้อมูลเดียวกันกลับมา เมื่อเกิดความล้มเหลว ให้ใช้สถานะก่อนหน้าที่บันทึกไว้เพื่อย้อนกลับ

ในบล็อกดักจับข้อผิดพลาดของการเปลี่ยนแปลงข้อมูล: setItems(previousItems) การดำเนินการนี้จะคืนสถานะกลับไปเป็นสถานะก่อนการอัปเดตแบบคาดการณ์ผลสำเร็จ จากนั้นให้แสดงการแจ้งเตือนข้อผิดพลาด ผู้ใช้เข้าใจว่าความล้มเหลวที่เกิดขึ้นน้อยครั้งเป็นสิ่งที่เกิดขึ้นได้ แต่สิ่งที่ผู้ใช้ยอมรับไม่ได้คือความไม่สอดคล้องที่เกิดขึ้นโดยไม่มีการแจ้งให้ทราบ

หลังจากย้อนกลับแล้ว ให้แสดงข้อความข้อผิดพลาดว่า "ไม่สามารถบันทึกการเปลี่ยนแปลงได้ โปรดลองอีกครั้ง" พร้อมปุ่มลองใหม่ที่เรียกการเปลี่ยนแปลงข้อมูลเดิมอีกครั้ง วิธีนี้ช่วยให้ผู้ใช้มีทางเลือก การทำงานร่วมกันระหว่างการย้อนกลับ + การแจ้งเตือนข้อผิดพลาด + การลองใหม่ ช่วยจัดการกรณีล้มเหลวได้อย่างเหมาะสมโดยไม่ปิดกั้นส่วนติดต่อผู้ใช้ทั้งหมด

เมื่อเพิ่มรายการใหม่แบบคาดการณ์ผลสำเร็จ เซิร์ฟเวอร์ยังไม่ได้กำหนดรหัสจริงให้รายการนั้น ให้สร้างรหัสชั่วคราวสำหรับรายการแบบคาดการณ์ผลสำเร็จ: const tempId = crypto.randomUUID() ใช้รหัสนี้เป็นคีย์ของรายการ หลังจากเซิร์ฟเวอร์ตอบกลับว่าสำเร็จแล้ว ให้แทนที่รหัสชั่วคราวด้วยรหัสจริงที่เซิร์ฟเวอร์กำหนดให้

หลังจากการเปลี่ยนแปลงข้อมูลเพื่อสร้างรายการสำเร็จ เซิร์ฟเวอร์จะตอบกลับด้วยรหัสจริง ให้อัปเดตสถานะเพื่อแทนที่รายการชั่วคราว: setItems(prev => prev.map(item => item.id === tempId ? { ...item, id: serverResponse.id } : item)) การปรับให้สอดคล้องนี้ช่วยให้การดำเนินการต่อ ๆ ไปใช้รหัสเซิร์ฟเวอร์ที่ถูกต้อง

หากผู้ใช้เริ่มการเปลี่ยนแปลงข้อมูลสองครั้งติดต่อกันอย่างรวดเร็ว การตอบกลับอาจมาถึงไม่เรียงลำดับ การตอบกลับของการเปลี่ยนแปลงข้อมูลครั้งที่สองอาจมาถึงก่อนครั้งแรก และการย้อนกลับของครั้งแรกอาจเขียนทับสถานะที่ถูกต้องจากครั้งที่สอง นี่คือภาวะการทำงานแข่งกันที่เกิดขึ้นเฉพาะกับส่วนติดต่อผู้ใช้แบบคาดการณ์ผลสำเร็จ

วิธีหนึ่งในการแก้เงื่อนไขการแข่งขันคือจัดลำดับการเปลี่ยนแปลงข้อมูลผ่านคิว ขณะที่การเปลี่ยนแปลงข้อมูลกำลังดำเนินการอยู่ ให้ปิดใช้งานปุ่มเริ่มการทำงาน (โดยตั้งค่าสถานะ isSubmitting เป็น true) อนุญาตให้การเปลี่ยนแปลงข้อมูลครั้งถัดไปทำงานได้ก็ต่อเมื่อครั้งก่อนหน้าเสร็จสิ้น วิธีนี้ลดความตอบสนองลงเล็กน้อย แต่รับประกันว่าลำดับของสถานะจะถูกต้อง

สำหรับการดำเนินการลบ ให้เก็บรายการก่อนหน้าไว้ กรองรายการที่ถูกลบออกจากสถานะ เรียก API สำหรับการลบ และย้อนกลับเมื่อไม่สำเร็จ การลบทำได้ง่ายกว่าการสร้าง เพราะไม่ต้องปรับ ID ให้ตรงกัน แต่ใช้หลักการเดียวกันได้ ลองเพิ่มความล่าช้าสั้น ๆ ก่อนการลบ (โดยแสดงตัวเลือก "เลิกทำ") แล้วจึงเรียก API

เหตุใดรายการที่เพิ่มแบบเชิงคาดการณ์จึงต้องมี ID ชั่วคราว

รูปแบบแบบทำด้วยตนเองคือ เก็บ previousItems ไว้ ใช้ setItems ตั้งสถานะใหม่ เรียก API และใช้ setItems(previousItems) เพื่อย้อนกลับเมื่อไม่สำเร็จพร้อมแสดงข้อผิดพลาด สำหรับการเพิ่ม ให้ใช้ crypto.randomUUID() เป็น ID ชั่วคราว และปรับให้ตรงกับ ID ของเซิร์ฟเวอร์เมื่อสำเร็จ ป้องกันเงื่อนไขการแข่งขันด้วยการปิดปุ่มเริ่มการทำงานระหว่างการเปลี่ยนแปลงข้อมูลที่กำลังดำเนินการ การย้อนกลับ + การแจ้งเตือนแบบข้อความสั้น + การลองใหม่ คือประสบการณ์ผู้ใช้มาตรฐานเมื่อเกิดข้อผิดพลาด