GET-अनुरोध द्वारा सर्वर से डेटा भेजना Redux में

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

आइए हमारे उत्पादों वाले एप्लिकेशन को खोलें, और इसमें server.js फ़ाइल खोलें। HTTP-अनुरोधों के साथ काम करने के लिए, हमें msw से कई उपकरण आयात करने की आवश्यकता है, आइए इसे करें:

api/server.jsimport { http, HttpResponse, delay } from 'msw'

साथ ही वास्तविकता, यानी संभावित नेटवर्क विलंब के लिए तुरंत सुधार करें। आइए हमारे कृत्रिम विलंब का मान 2 सेकंड रखें, ताकि हम डेटा लोड होते हुए देख सकें। इसे const PRODS_PER_SELLER = 2 के बाद लिखें:

api/server.jsconst ARTIFICIAL_DELAY_MS = 2000

और अब फ़ाइल के अंत में वर्कर के निर्यात से पहले, API अनुरोध हैंडलर के लिए एक सरणी बनाएंगे:

api/server.jsexport const handlers = []

और फिर वर्गाकार कोष्ठकों में उत्पादों के GET-अनुरोध को इंटरसेप्ट करने के लिए पहला हैंडलर लिखेंगे:

api/server.jsexport const handlers = [http.get()]

http.get के लिए पहले पैरामीटर के रूप में, हम कोई नकली पता पास करेंगे, उदाहरण के लिए '/fakeServer/products', और दूसरे पैरामीटर के रूप में एक अतुल्यकालिक कॉलबैक:

api/server.jsexport const handlers = [http.get('/fakeServer/products', async () => {})]

अब इस कॉलबैक के लिए कोड लिखते हैं। इसकी मदद से हम डेटाबेस से सभी उत्पाद निकालेंगे। यहां हम serializeProduct फ़ंक्शन का भी उपयोग करेंगे, जिसका कोड हमने पिछले पाठ में लिखा था। आइए इसे map में पास करें। फिर एक विलंब करेंगे (मानो कि नेटवर्क धीमा है) और response में JSON के रूप में उत्पादों के डेटा वाली वस्तुएं वापस करेंगे:

api/server.jsexport const handlers = [
  http.get('/fakeServer/products', async () => {
    const products = db.product.getAll().map(serializeProduct)
    await delay(ARTIFICIAL_DELAY_MS)
    return HttpResponse.json(products)
  }),
]

और अंतिम। हमने अपने वर्कर के लिए पहला handler लिख दिया है, आइए इस वर्कर को handlers सरणी पास करें। इसके लिए फ़ाइल में अंतिम पंक्ति को ठीक करें:

api/server.jsexport const worker = setupWorker(...handlers)