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

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

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

import { http, HttpResponse, delay } from 'msw'

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

const ARTIFICIAL_DELAY_MS = 2000

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

export const handlers = []

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

export const handlers = [http.get()]

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

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

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

export 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 सरणी पास करें। इसके लिए फ़ाइल में अंतिम पंक्ति को ठीक करें:

export const worker = setupWorker(...handlers)

अपने छात्रों वाले एप्लिकेशन को खोलें, और इसमें server.js फ़ाइल खोलें। फ़ाइल में msw से निर्दिष्ट उपकरण आयात करें। इस पाठ की सामग्री का अध्ययन करके, अनुरोधों को इंटरसेप्ट करने के लिए हैंडलर की एक खाली सरणी बनाएं। इसमें छात्रों के GET-अनुरोध के हैंडलर के लिए कोड लिखें। पथ के रूप में, आपके पास '/fakeServer/students' होना चाहिए।

फ़ाइल के अंत में, वर्कर को handlers सरणी पास करना न भूलें।