สอนสร้างฟังก์ชันลบข้อมูล Agency ใน React และ TypeScript ด้วย RTK Query
มาดูวิธีการสร้างตารางข้อมูล Agency ที่มาพร้อมปุ่มยืนยันการลบและการจัดการแคชอัตโนมัติด้วย RTK Query บน React และ TypeScript
ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง
- ใช้ React และ TypeScript พัฒนาตารางข้อมูล Agency
- เพิ่มฟังก์ชันลบพร้อมหน้าต่างยืนยันการทำรายการ
- ใช้ RTK Query จัดการการส่งข้อมูลและรีเฟรชตารางอัตโนมัติ
- แสดงผลแจ้งเตือนความสำเร็จด้วย React Toastify
บทความนี้จะพาไปดูตัวอย่างการสร้างตารางข้อมูล Agency (Agency DataTable) พร้อมกับฟังก์ชันการลบข้อมูล โดยใช้เทคโนโลยีหลักอย่าง React, TypeScript, RTK Query และ React Toastify เพื่อประสบการณ์ใช้งานที่ลื่นไหลและปลอดภัย
ในส่วนของการทำงาน ปุ่มลบข้อมูลจะทำหน้าที่จัดเก็บเฉพาะรหัสไอดีของ agency ที่ถูกเลือกไว้ผ่านคำสั่ง onClick={handleConfirmDelete} ซึ่งขั้นตอนนี้ช่วยป้องกันไม่ให้เกิดการลบข้อมูลโดยไม่ได้ตั้งใจ และบังคับให้ระบบต้องรอการยืนยันจากผู้ใช้งานจริงก่อนเสมอ
ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง
เมื่อผู้ใช้ยืนยันการลบ ระบบจะส่งข้อมูลไปยังฝั่งแบ็กเอนด์ด้วยรหัสไอดีดังกล่าว เช่น { "agencyId": 5 } และเมื่อการลบเสร็จสิ้นสมบูรณ์ แบ็กเอนด์จะส่งข้อความตอบกลับกลับมาว่า { "response": "Agency deleted successfully" } ซึ่งข้อความนี้จะถูกนำไปแสดงผลผ่านปุ่มแจ้งเตือนหรือ Toast ทันที
การใช้งาน RTK Query ในโปรเจกต์ React ช่วยลดความซับซ้อนในการจัดการสถานะข้อมูล (State Management) ได้อย่างมาก โดยเฉพาะการใช้ฟีเจอร์ invalidatesTags: ["Agency"] ซึ่งช่วยให้นักพัฒนาไม่ต้องคอยอัปเดตอาเรย์ข้อมูลในหน้าจอด้วยตัวเอง เพราะระบบจะทำการดึงข้อมูลรายการ agency ใหม่โดยอัตโนมัติทันทีหลังจากการลบสำเร็จ
ที่มา: Dev.to
พบข้อมูลผิดพลาดในบทความนี้? แจ้งปัญหาบทความนี้
ความคิดเห็น
แสดงความคิดเห็น