Menghapuskan Penduaan Permintaan dalam Redux

Pelajaran ini akan berguna untuk kita jika, apabila memulakan aplikasi, penghantaran permintaan data diduakan, dan kemudian pasangan produk dengan id yang sama diterima, dan akibatnya amaran merah yang menakutkan muncul dalam konsol pelayar.

Punca ini terletak pada ciri pemasangan komponen dalam React 18 dan ke atas dalam mod pembangunan (dev), apabila menggunakan React.StrictMode (mereka kata, dalam mod production semua ok dengan ini). Mula-mula komponen dipasang, kemudian dilepaskan dan dipasang semula. Oleh itu permintaan dihantar dua kali.

Mungkin, apabila anda mempelajari bahan ini, pemasangan berganda ini dalam React sudah akan diubah dengan cara tertentu. Kami tidak akan mendalami hal ini, tetapi hanya menggunakan hook React useRef, yang akan membantu kami mengelakkan kekeliruan ini.

Mari buka aplikasi kami dengan produk, dan di dalamnya fail ProductsList.jsx. Import hook useRef ke dalamnya:

import { useEffect, useRef } from 'react'

Dan sekarang ubah sedikit blok kod berikut dengan useEffect:

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

Sebagai permulaan, mari perkenalkan pembolehubah baru dataFetch untuk useRef. Pada mulanya tetapkan sifatnya current kepada false. Jika aplikasi sudah dimulakan dan, oleh itu, permintaan telah dihantar, maka sifat current sudah akan true, bermakna kami hanya akan keluar dari fungsi dan permintaan data berulang tidak akan berlaku. Jadi, secebis kod yang dinyatakan 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 mulakan semula aplikasi kami dan dengan lega perhatikan kehilangan amaran merah dalam konsol, dan lihat senarai produk tanpa pendua, sekarang terdapat 8, seperti yang kami rancangkan pada pelayan. Sekarang dalam Redux DevTools, action-action, yang dijana semasa permintaan, tidak lagi berulang.

Buka aplikasi anda dengan pelajar, dan di dalamnya fail StudentsList.jsx. Hapuskan masalah dengan permintaan berganda, mengikut bahan pelajaran, jika anda memilikinya.