Redux में डुप्लिकेट अनुरोध को हटाना

यह पाठ हमारे लिए उपयोगी होगा उस स्थिति में, जब एप्लिकेशन शुरू होने पर डेटा अनुरोध का भेजना डुप्लिकेट हो जाता है, और फिर एक ही id वाले उत्पादों के जोड़े आते हैं, और परिणामस्वरूप ब्राउज़र कंसोल में डरावनी लाल चेतावनियाँ दिखाई देती हैं।

इसका कारण React 18 और उससे ऊपर के संस्करण में विकास (dev) मोड में, React.StrictMode का उपयोग करते समय कंपोनेंट माउंटिंग की विशेषता में निहित है (कहा जाता है कि प्रोडक्शन मोड में यह ठीक है)। पहले कंपोनेंट माउंट होता है, फिर अनमाउंट होता है और फिर से माउंट होता है। इसलिए अनुरोध दो बार भेजा जाता है।

संभव है कि जब आप यह सामग्री पढ़ रहे होंगे, तब React में यह डबल माउंटिंग किसी तरह बदल चुकी होगी। हम गहराई में नहीं जाएंगे, बल्कि बस React हुक useRef का उपयोग करेंगे, जो हमें इस समस्या से बचने में मदद करेगा।

आइए हमारा उत्पादों वाला एप्लिकेशन खोलें, और उसमें ProductsList.jsx फाइल खोलें। इसमें हुक useRef इम्पोर्ट करें:

products/ProductsList.jsximport { useEffect, useRef } from 'react'

और अब useEffect वाले कोड के अगले ब्लॉक को थोड़ा बदलें:

products/ProductsList.jsxuseEffect(() => {
  if (productStatus === 'idle') {
    dispatch(fetchProducts())
  }
}, [productStatus, dispatch])

सबसे पहले useRef के लिए एक नया वेरिएबल dataFetch बनाएंगे। शुरू में इसकी प्रॉपर्टी current को false पर सेट करेंगे। अगर एप्लिकेशन पहले ही शुरू हो चुका है और, तदनुसार, अनुरोध भेजा जा चुका है, तो प्रॉपर्टी current true होगी, मतलब हम बस फंक्शन से बाहर निकल जाएंगे और डेटा का दोबारा अनुरोध नहीं होगा। तो, उपर्युक्त कोड का टुकड़ा अब ऐसा होगा:

products/ProductsList.jsxconst dataFetch = useRef(false)

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

अब हमारा एप्लिकेशन फिर से शुरू करें और राहत के साथ कंसोल में लाल चेतावनियों के गायब होने पर ध्यान दें, और डुप्लिकेट के बिना उत्पादों की सूची देखें, अब उनमें 8 हैं, जैसा कि हमने सर्वर पर प्लान किया था। अब Redux DevTools में अनुरोध के दौरान जनरेट होने वाले एक्शन अब दोहराए नहीं जाते हैं।