Menghilangkan Duplikasi Permintaan di Redux

Pelajaran ini akan berguna bagi kita dalam kasus di mana saat menjalankan aplikasi, pengiriman permintaan data terduplikasi, dan kemudian datang pasangan produk dengan id yang sama, dan akibatnya muncul peringatan merah yang menakutkan di konsol browser.

Penyebabnya terletak pada fitur pemasangan komponen di React 18 versi dan lebih tinggi dalam mode pengembangan (dev), saat menggunakan React.StrictMode (dikatakan, dalam mode production semua baik-baik saja dengan ini). Pertama, komponen terpasang, lalu terlepas dan terpasang lagi. Itulah sebabnya permintaan dikirim dua kali.

Mungkin, ketika Anda mempelajari materi ini, pemasangan ganda ini di React sudah diubah dengan某种方式. Kita tidak akan mendalami hal ini, tetapi hanya menggunakan hook React useRef, yang akan membantu kita mengatasi kesalahpahaman ini.

Mari buka aplikasi kita dengan produk, dan di dalamnya file ProductsList.jsx. Impor hook useRef ke dalamnya:

import { useEffect, useRef } from 'react'

Dan sekarang ubah sedikit blok kode berikut dengan useEffect:

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

Pertama, mari perkenalkan variabel baru dataFetch untuk useRef. Awalnya, set properti current-nya ke false. Jika aplikasi sudah pernah dijalankan dan, karenanya, permintaan telah dikirim, maka properti current sudah akan true, artinya kita hanya akan keluar dari fungsi dan permintaan data ulang tidak akan terjadi. Jadi, potongan kode yang disebutkan di atas sekarang akan menjadi seperti ini:

const dataFetch = useRef(false)

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

Sekarang jalankan lagi aplikasi kita dan dengan lega catat hilangnya peringatan merah di konsol, dan lihatlah daftar produk tanpa duplikat, sekarang ada 8, seperti yang kita rencanakan di server. Sekarang di Redux DevTools, action-action yang dihasilkan selama permintaan, tidak lagi terulang.

Buka aplikasi Anda dengan siswa, dan di dalamnya file StudentsList.jsx. Hilangkan masalah dengan permintaan ganda, sesuai dengan materi pelajaran, jika Anda memilikinya.