Loại bỏ yêu cầu trùng lặp trong Redux

Bài học này sẽ hữu ích cho chúng ta trong trường hợp, khi khởi chạy ứng dụng, việc gửi yêu cầu dữ liệu bị trùng lặp, và sau đó nhận được các cặp sản phẩm có id giống nhau, và hệ quả là xuất hiện các cảnh báo màu đỏ đáng sợ trong console trình duyệt.

Nguyên nhân của việc này nằm ở đặc điểm gắn kết components trong React 18 và các phiên bản cao hơn trong chế độ phát triển (dev), khi sử dụng React.StrictMode (người ta nói rằng trong chế độ production mọi thứ đều ổn với việc này). Đầu tiên, component được gắn kết, sau đó ngắt kết nối và lại được gắn kết lần nữa. Do đó mà yêu cầu được gửi đi hai lần.

Có thể, khi bạn học tài liệu này, việc gắn kết kép trong React đã được thay đổi bằng cách nào đó. Chúng ta sẽ không đi sâu vào chi tiết, mà chỉ đơn giản sử dụng React hook useRef, hook này sẽ giúp chúng ta tránh được sự nhầm lẫn này.

Hãy mở ứng dụng của chúng ta với các sản phẩm, và trong đó là tệp ProductsList.jsx. Import hook useRef vào đó:

import { useEffect, useRef } from 'react'

Và bây giờ hãy thay đổi một chút khối code sau với useEffect:

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

Đầu tiên, hãy tạo một biến mới dataFetch cho useRef. Ban đầu, hãy đặt thuộc tính current của nó thành false. Nếu ứng dụng đã được khởi chạy và, tương ứng, yêu cầu đã được gửi đi, thì thuộc tính current sẽ là true, có nghĩa là chúng ta chỉ cần thoát khỏi hàm và yêu cầu dữ liệu lặp lại sẽ không xảy ra. Vì vậy, đoạn code được đề cập ở trên bây giờ sẽ như thế này:

const dataFetch = useRef(false)

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

Bây giờ hãy khởi chạy lại ứng dụng của chúng ta và nhẹ nhàng ghi nhận sự biến mất của các cảnh báo màu đỏ trong console, và xem danh sách sản phẩm không có bản sao, bây giờ có 8 sản phẩm, như chúng ta đã lên kế hoạch trên máy chủ. Bây giờ trong Redux DevTools, các hành động được tạo ra khi yêu cầu, không còn lặp lại nữa.

Hãy mở ứng dụng của bạn với sinh viên, và trong đó là tệp StudentsList.jsx. Hãy loại bỏ vấn đề yêu cầu kép, theo tài liệu bài học, nếu bạn có vấn đề như vậy.