रेडक्स में कंपोनेंट से थंक भेजना

इस पाठ में हम रिएक्ट-कंपोनेंट ProductsList से उत्पादों को प्राप्त करने के लिए थंक भेजेंगे।

चलिए अब हमारा उत्पाद एप्लिकेशन खोलते हैं, और इसमें ProductsList.jsx फ़ाइल खोलते हैं। सबसे पहले हम आयात में वह थंक fetchProducts जोड़ेंगे, जिसे हमने बनाया था:

products/ProductsList.jsximport { selectAllProducts, fetchProducts } from './productsSlice'

हमें अपना action creator भेजने के लिए हुक useDispatch की भी आवश्यकता होगी और हुक useEffect क्योंकि यहाँ हमारे पास साइड इफेक्ट है, क्योंकि हम नेटवर्क के साथ काम कर रहे हैं, और यह एक बाहरी API है:

products/ProductsList.jsximport { useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'

अब फ़ंक्शन ProductsList के कोड में products की घोषणा से पहले पहली लाइन में जोड़ेंगे:

products/ProductsList.jsxconst dispatch = useDispatch()

इसके बाद, स्टेट से उत्पाद प्राप्त करते समय हम अनुरोध की स्थिति भी निकालेंगे:

products/ProductsList.jsxconst products = useSelector(selectAllProducts)
const productStatus = useSelector((state) => state.products.status)

और इसके तुरंत बाद हम हुक useEffect की सहायता से React को बताएंगे, कि हमें कंपोनेंट के रेंडर होने के बाद उत्पाद प्राप्त करने हैं। यहाँ हमें अनुरोध की स्थिति की आवश्यकता होगी, क्योंकि हमारे लिए यह महत्वपूर्ण है कि ऐसा अनुरोध केवल एक बार भेजा जाए:

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

अब हम अपना एप्लिकेशन चला सकते हैं, इसमें बाईं मेन्यू में 'Products' पर क्लिक करें। हम अभी उत्पादों की सूची नहीं देख पाएंगे, लेकिन यदि हम अपने Redux DevTools में जाएं, तो बाईं ओर की विंडो में स्वचालित रूप से जेनरेट किए गए एक्शन products/fetchProducts/pending और fulfilled दिखाई देंगे (जैसा कि मैंने पिछले पाठ में कहा था)। अब चलिए action products/fetchProducts/fulfilled और उसके फ़ील्ड payload पर क्लिक करते हैं - और यह रही हमारी उत्पादों की सूची! हुर्रे, हमारे चेन के सभी लिंक - सर्वर, डेटाबेस, क्लाइंट और Redux - एप्लिकेशन मिलजुल कर और समन्वय से काम कर रहे हैं। वैसे, जैसा कि आप देख रहे हैं, यहाँ meta प्रॉपर्टी भी है, जिसमें हम अनुरोध की स्थिति देख सकते हैं।

आइए एक और बात पर ध्यान दें, आपके साथ ऐसा हो सकता है कि pending और, परिणामस्वरूप, fulfilled दो बार दिखाई दें। यदि ऐसा है, तो निराश न हों, हम इसके बारे में बाद में बात करेंगे।