थंक द्वारा रेडक्स में भेजे गए POST अनुरोध को संसाधित करना

हमने आपके साथ सर्वर से उत्पादों और विक्रेताओं के डेटा प्राप्त किए और उन्हें एप्लिकेशन में प्रदर्शित किया। लेकिन थंक का उपयोग करके न केवल डेटा प्राप्त किया जा सकता है, बल्कि भेजा भी जा सकता है। आइए जानें कि यह कैसे करना है।

नया उत्पाद जोड़ने के बाद, यह हमारे स्टोर में रहता है, यानी हमारे एप्लिकेशन के अंदर। आइए इसे ऐसा बनाएं कि नया उत्पाद सर्वर पर सहेजा जाए।

आइए सर्वर से शुरू करते हैं। यहां हमें अब GET नहीं, बल्कि POST अनुरोध को संसाधित करना होगा, क्योंकि अब सर्वर पर उत्पाद डेटा आएगा, जिसे हम वहां सहेजेंगे।

आइए हमारा उत्पादों वाला एप्लिकेशन खोलें, और उसमें server.js फ़ाइल खोलें। इसमें handlers सरणी ढूंढें और इसमें POST अनुरोध के लिए एक और हैंडलर जोड़ें। यहां हम अनुरोध का बॉडी भी स्वीकार करेंगे, इसलिए कॉलबैक में हमें request पास करना होगा:

api/server.jshttp.post('/fakeServer/products', async ({ request }) => {})

अब कर्ली ब्रेसिज़ में हम अपने कॉलबैक का कोड लिखेंगे। शुरुआत के लिए, अनुरोध डेटा निकालें और त्रुटि की स्थिति में सर्वर से प्रतिक्रिया भेजें कि हम डेटा सहेजने में असमर्थ थे और स्टेटस 500:

api/server.jshttp.post('/fakeServer/products', async ({ request }) => {
  const data = await request.json()

  if (data.content === 'error') {
    await delay(ARTIFICIAL_DELAY_MS)
    
    return new HttpResponse('server save error', {
      status: 500,
      headers: {
        'Content-Type': 'application/json',
      },
    })
  }
})

यदि डेटा ठीक है, तो हम डेटाबेस में उस विक्रेता को id के आधार पर ढूंढेंगे जो हमारे पास अनुरोध में आया था और उस विक्रेता को data में लिख देंगे (आखिरकार, विक्रेता का डेटा भी तो सर्वर पर संग्रहीत है ;) ):

api/server.jsconst seller = db.seller.findFirst({
  where: { id: { equals: data.seller } },
})
data.seller = seller

अगला, डेटाबेस में इस उत्पाद के लिए प्रतिक्रियाओं वाली एक ऑब्जेक्ट बनाएंगे। और अब, उत्पाद के लिए आवश्यक सभी फ़ील्ड्स होने के साथ, डेटाबेस में उत्पाद को स्वयं बनाएंगे:

api/server.jsdata.reactions = db.reaction.create()
const product = db.product.create(data)

विलंब लगाएं और हमारे कॉलबैक के लिए कोड की अंतिम पंक्ति में उत्पाद के साथ प्रतिक्रिया वापस करें:

api/server.jsawait delay(ARTIFICIAL_DELAY_MS)
return HttpResponse.json(serializeProduct(product))

इस पर हमने सर्वर के साथ पूरी तरह से समाप्त कर दिया है और अब उस पर वापस नहीं आएंगे।

वैसे, एक और उपयोगी बात। export const worker = setupWorker(...handlers) लाइन के बाद आप निम्नलिखित कोड जोड़ सकते हैं:

api/server.jsworker.listHandlers().forEach((handler) => {
  console.log(handler.info.header)
})

और अब आप ब्राउज़र कंसोल में प्रत्येक हैंडलर के ट्रिगर होने का परिणाम देख पाएंगे।

निश्चित रूप से हमारा सर्वर वास्तविक नहीं है और यदि हम ब्राउज़र में पेज को जबरदस्ती रिफ्रेश करते हैं, तो हमारे सभी नए उत्पाद ऑब्जेक्ट्स गायब हो जाएंगे।