მოთხოვნის დუბლირების აღმოფხვრა Redux-ში

ეს გაკვეთილი გამოგვადგება იმ შემთხვევაში, თუ აპლიკაციის გაშვებისას ჩვენ გვქონდა მონაცემების მოთხოვნის გაგზავნის დუბლირება, და შემდეგ მოდიოდა პროდუქტების წყვილი იდენტური id-ებით, და, შედეგად, ბრაუზერის კონსოლში ჩნდებოდა საშინელი წითელი გაფრთხილებები.

ამის მიზეზი მდგომარეობს React 18 და უფრო მაღალი ვერსიის კომპონენტების მონტაჟის თავისებურებაში განვითარების რეჟიმში (dev), როდესაც გამოიყენება React.StrictMode (ამბობენ, production რეჟიმში ყველაფერი კარგადაა ამასთან დაკავშირებით). ჯერ კომპონენტი ერთვის, შემდეგ გამორთვა და ისევ ერთვის. ამიტომაც მოთხოვნა იგზავნება ორჯერ.

შესაძლოა, როდესაც თქვენ ისწავლით ამ მასალას, React-ში ორმაგი მონტაჟი უკვე როგორმე შეიცვლება. ჩვენ არ ჩავუღრმავდებით ჯუნგლებს, არამედ უბრალოდ გამოვიყენებთ React-ის useRef ჰუკს, რომელიც დაგვეხმარება ამ შეცდომის გვერდის ავლით.

გავხსნათ ჩვენი აპლიკაცია პროდუქტებით, და მასში ფაილი ProductsList.jsx. იმპორტირებულ მასში ჰუკი useRef:

import { useEffect, useRef } from 'react'

და ახლა ოდნავ შევცვალოთ შემდეგი ბლოკი კოდი useEffect-თან:

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

დასაწყისისთვის შემოვიღოთ ახალი ცვლადი dataFetch useRef-ისთვის. თავდაპირველად დავაყენოთ მისი თვისება current false-ზე. თუ აპლიკაცია უკვე გაეშვა და, შესაბამისად, მოთხოვნა იყო გაგზავნილი, მაშინ თვისება current უკვე იქნება true, რაც ნიშნავს, რომ ჩვენ უბრალოდ გამოვცდებით ფუნქციას და მონაცემების მოთხოვნის გამეორება არ მოხდება. ასე რომ, ზემოხსენებული კოდის ნაწილი ახლა ასე გამოიყურება:

const dataFetch = useRef(false)

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

ახლა კვლავ გავუშვათ ჩვენი აპლიკაცია და მოშუშებით აღვნიშნოთ წითელი გაფრთხილებების გაქრობა კონსოლში, და ვნახოთ პროდუქტების სია დუბლიკატების გარეშე, ახლა მათი 8, როგორც ჩვენ დავგეგმეთ სერვერზე. ახლა Redux DevTools-ში ექშენები, რომლებიც გენერირდება მოთხოვნის დროს, აღარ მეორდება.

გახსენით თქვენი აპლიკაცია სტუდენტებთან, და მასში ფაილი StudentsList.jsx. აღმოფხვრათ ორმაგი მოთხოვნის პრობლემა, გაკვეთილის მასალების შესაბამისად, თუ თქვენ ეს პრობლემა გაქვთ.