การกำจัดการร้องขอข้อมูลซ้ำซ้อนใน Redux

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

สาเหตุของปัญหานี้มาจากลักษณะการมอนต์ คอมโพเนนต์ใน React 18 และเวอร์ชันที่สูงกว่า ในโหมด การพัฒนา (dev) เมื่อใช้ React.StrictMode (ได้ยินมาว่าในโหมด production ไม่มีปัญหานี้) โดยเริ่มแรกคอมโพเนนต์จะถูกติดตั้ง (mount) จากนั้นก็ถอดออก (unmount) และติดตั้งอีกครั้ง ดังนั้น คำขอก็จึงถูกส่งสองครั้ง

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

มาเปิดแอปพลิเคชันสินค้าของเรา และในนั้นเปิดไฟล์ ProductsList.jsx แล้วนำเข้า hook useRef:

import { useEffect, useRef } from 'react'

และตอนนี้มาแก้ไขบล็อกโค้ดถัดไป ที่มี useEffect เล็กน้อย:

useEffect(() => {
	if (productStatus === 'idle') {
		dispatch(fetchProducts())
	}
}, [productStatus, dispatch])

เริ่มต้นด้วยการประกาศตัวแปรใหม่ชื่อ dataFetch สำหรับ useRef ตั้งค่า property current เป็น false ตั้งแต่แรก หากแอปพลิเคชัน ถูกเริ่มต้นแล้ว และคำขอถูก ส่งไปแล้ว property current จะเป็น true แล้ว ซึ่งหมายความว่าเราจะออกจากฟังก์ชันและ จะไม่มีการร้องขอข้อมูลซ้ำอีก ดังนั้นโค้ดส่วนที่กล่าวมาข้างต้น จะมีหน้าตาดังนี้:

const dataFetch = useRef(false)

useEffect(() => {
	if (dataFetch.current) return
	dataFetch.current = true
	if (productStatus === 'idle') {
		dispatch(fetchProducts())
	}
}, [productStatus, dispatch])

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

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