Αποφυγή Διπλότυπων Αιτημάτων στο Redux

Αυτό το μάθημα θα μας φανεί χρήσιμο στην περίπτωση που, κατά την εκκίνηση της εφαρμογής μας, αποστέλλεται διπλότυπο αίτημα για δεδομένα, και στη συνέχεια λαμβάνονται ζεύγη προϊόντων με τα ίδια id, και, ως αποτέλεσμα, εμφανίζονται τρομερά κόκκινα μηνύματα προειδοποίησης στην κονσόλα του προγράμματος περιήγησης.

Η αιτία αυτού βρίσκεται σε ένα χαρακτηριστικό της σύνδεσης των components στο React 18 και άνω σε λειτουργία ανάπτυξης (dev), όταν χρησιμοποιείται το React.StrictMode (λένε ότι σε λειτουργία production όλα είναι εντάξει με αυτό). Αρχικά το component συνδέεται, μετά αποσυνδέεται και ξανασυνδέεται. Επομένως και το αίτημα αποστέλλεται δύο φορές.

Είναι πιθανό, όταν μελετάτε αυτό το υλικό, αυτή η διπλή σύνδεση στο React να έχει αλλάξει με κάποιο τρόπο. Δεν θα εμβαθύνουμε σε λεπτομέρειες, απλά προς το παρόν θα χρησιμοποιήσουμε το React hook useRef, που θα μας βοηθήσει να παρακάμψουμε αυτή την ατέλεια.

Ας ανοίξουμε την εφαρμογή μας με τα προϊόντα, και σε αυτή το αρχείο ProductsList.jsx. Ας εισάγουμε σε αυτό το hook useRef:

import { useEffect, useRef } from 'react'

Και τώρα ας αλλάξουμε λίγο το ακόλουθο block κώδικα με το 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. Αποφασίστε το πρόβλημα με το διπλό αίτημα, σύμφωνα με το υλικό του μαθήματος, εάν υπάρχει τέτοιο πρόβλημα.