Redux में अनुरोध स्थिति का उपयोग

पिछले पाठों में हमने अतिरिक्त रिड्यूसर की मदद से वर्णन किया था कि हमारे एप्लिकेशन को क्या करना चाहिए, यदि fetchProducts अनुरोध भेजते समय एक्शन pending, fulfilled और rejected भेजता है। अब हम उपयोगकर्ता को दिखा सकते हैं कि डेटा लोड होने की प्रक्रिया किस स्तर पर है।

आइए उत्पादों वाला हमारा एप्लिकेशन खोलें, और उसमें ProductsList.jsx फ़ाइल खोलें। सबसे पहले, हम उत्पाद कार्ड के लिए एक अलग कंपोनेंट ProductCard बनाएंगे। इसे इम्पोर्ट लाइनों के ठीक बाद ProductsList फ़ंक्शन से पहले बनाएंगे। प्रॉप्स के रूप में हम इसे product पास करेंगे:

products/ProductsList.jsxconst ProductCard = ({ product }) => {
  return ()
}

और अब खाली गोल कोष्ठक return में उत्पाद डेटा दिखाने का सारा कोड dispProducts से स्थानांतरित कर देंगे:

products/ProductsList.jsxconst ProductCard = ({ product }) => {
  return (
    <div key={product.id} className="product-excerpt">
      <h3>{product.name}</h3>
      <SellerOfProd sellerId={product.seller} />
      <p>{product.desc.substring(0, 100)}</p>
      <UserReactions product={product} />
      <Link to={`/products/${product.id}`} className="link-btn">
        view
      </Link>
    </div>
  )
}

और ProductsList में बची हुई लाइन कोड हटा देंगे। अब इसकी जरूरत नहीं है:

products/ProductsList.jsxconst dispProducts = products.map((product) => ())

और अब ProductsList फ़ंक्शन के कोड की शुरुआत में कुछ और वेरिएबल बनाएंगे, error और content। पहला हमारे पास एरर के लिए होगा, दूसरे में हम अनुरोध की स्थिति के आधार पर अलग-अलग कंटेंट डालेंगे। इसे const dataFetch = useRef(false) से पहले करेंगे:

products/ProductsList.jsxconst error = useSelector((state) => state.products.error)
let content

अब कंपोनेंट ProductsList के return कमांड से पहले कोड का एक ब्लॉक लिखेंगे शर्तों के साथ, जिसमें content में स्थिति के आधार पर अलग-अलग कंटेंट डाला जाएगा। सबसे पहले हम स्थिति 'in progress' का वर्णन करेंगे - जब हमारा अनुरोध भेजा गया है। इस स्थिति में हम उपयोगकर्ता को बताएंगे कि डेटा लोड हो रहा है:

products/ProductsList.jsxif (productStatus === 'in progress') {
  content = <p>Products list loading ...</p>
}

यदि हमारा लोडिंग सफल रहा (हमने इसे 'success' के रूप में दर्शाया था), तो हमें प्राप्त उत्पादों की सूची दिखानी है। इसे map में ProductCard कंपोनेंट की मदद से दिखाएंगे, जिसे प्रॉप्स के रूप में product पास करेंगे:

products/ProductsList.jsxif (productStatus === 'in progress') {
  content = <p>Products list loading ...</p>
} else if (productStatus === 'success') {
  content = products.map((product) => (
    <ProductCard key={product.id} product={product} />
  ))
}

और आखिरी स्थिति, जो हमारे पास है - वह 'fail' है। इसे भी जोड़ देंगे। यहाँ error वेरिएबल का उपयोग करेंगे, जिसमें हमने ऊपर स्टेट से एरर डाला था:

products/ProductsList.jsxif (productStatus === 'in progress') {
  content = <p>Products list loading ...</p>
} else if (productStatus === 'success') {
  content = products.map((product) => (
    <ProductCard key={product.id} product={product} />
  ))
} else if (productStatus === 'fail') {
  content = <div>{error}</div>
}

और आखिरी कदम के रूप में हम return के लिए बने कोड ब्लॉक में पुराने {dispProducts} को {content} से बदल देंगे।

अपना एप्लिकेशन चलाएं, मेन्यू में 'Products' पर क्लिक करें। सब काम करता है। देखते हैं कि लगभग 2 सेकंड (जैसा कि हमने सर्वर पर सेट किया था) उत्पाद जोड़ने के फॉर्म के नीचे 'Products list loading ...' लिखा दिख रहा है, और फिर उत्पादों की सूची आ जाती है।