Redux में सर्वर-साइड काम के लिए MSW स्थापित करना

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

हमारे पास कोई वास्तविक सर्वर नहीं होगा, इसलिए हम इसके साथ काम करने का अनुकरण करेंगे, जिसके लिए हम एक शानदार टूल Mock Service Worker का उपयोग करेंगे। Mock Service Worker (MSW) एक API मॉकिंग टूल है जो मानकीकृत Service Worker API का उपयोग करता है, जिसे नेटवर्क स्तर पर अनुरोधों को रोकने के लिए डिज़ाइन किया गया है। MSW हमारे अनुरोधों (requests) पर नकली प्रतिक्रियाएं (responses) उत्पन्न करेगा। इसके अलावा, जैसा कि डेवलपर्स का दावा है, यह टूल इतना प्रभावी और लचीला है कि मॉक के साथ डिबगिंग (जिसके लिए एप्लिकेशन में कुछ विशेष बनाने की आवश्यकता नहीं होती) के बाद, एप्लिकेशन को पहले से ही वास्तविक बाहरी सर्वर के साथ काम में लगाया जा सकता है। इसका दस्तावेज़ीकरण काफी व्यापक है, और, यदि आप MSW में रुचि रखते हैं, तो आप इसे आधिकारिक वेबसाइट पर पढ़ सकते हैं।

आइए msw स्थापित करने के लिए आगे बढ़ें। इसके लिए हम अपना उत्पादों वाला प्रोजेक्ट खोलेंगे और टर्मिनल में दर्ज करेंगे:

terminalnpm install msw --save-dev

msw को काम करने के लिए हमें mockServiceWorker.js फ़ाइल बनाने और कॉपी करने की भी आवश्यकता होती है, इसे किसी सार्वजनिक निर्देशिका में रखना होता है। अक्सर यह public फ़ोल्डर होता है। हमारे पास खाली public फ़ोल्डर है, आइए इसे वहाँ कॉपी करें। इसके लिए टर्मिनल में कमांड चलाएं और फिर public के उपयोग के लिए सहमति दें:

terminalnpx msw init public

अब public में देखें, वहाँ जेनरेटेड स्क्रिप्ट mockServiceWorker.js दिखाई देनी चाहिए। अब हमारे उत्पादों वाले एप्लिकेशन को चलाएं और ब्राउज़र के एड्रेस बार में http://localhost:5173/mockServiceWorker.js दर्ज करें (क्योंकि हमारा एप्लिकेशन 5173 पोर्ट पर चल रहा है)। क्या आप ब्राउज़र विंडो में फ़ाइल की सामग्री देख रहे हैं mockServiceWorker.js? इसका मतलब सब कुछ बढ़िया है, आगे बढ़ते हैं।

आगे आइए src फ़ोल्डर के अंदर api फ़ोल्डर बनाएं, और उसमें server.js फ़ाइल बनाएं, जिसमें हम सर्वर कोड लिखेंगे। अब server.js खोलें और इसमें setupWorker फ़ंक्शन इम्पोर्ट करें, जो इनस्टॉल की गई msw लाइब्रेरी से हो:

src/api/server.jsimport { setupWorker } from 'msw/browser'

फ़ाइल में नीचे worker वेरिएबल बनाएं और इसे एक्सपोर्ट करें:

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

और अब आइए main.jsx फ़ाइल खोलें और इसमें अपना वर्कर इम्पोर्ट करें:

main.jsximport { worker } from './api/server'

अब इसे अपने एप्लिकेशन से जोड़ दें। इसके लिए वह कोड, जिसकी मदद से हम अपने React एप्लिकेशन की जड़ बनाते हैं, हम एक फ़ंक्शन में लपेटेंगे, इसका नाम main रखेंगे और इसकी पहली लाइन में वर्कर को शुरू करने के लिए फ़ंक्शन जोड़ेंगे। बेशक main को कॉल करना न भूलें। सभी इम्पोर्ट लाइनों के बाद का पूरा कोड अब इस तरह दिखेगा:

main.jsxasync function main() {
  await worker.start({ onUnhandledRequest: 'bypass' })

  ReactDOM.createRoot(document.getElementById('root')).render(
    <React.StrictMode>
      <Provider store={store}>
        <App />
      </Provider>
    </React.StrictMode>
  )
}

main()

अब हमें यकीन है कि हमारा एप्लिकेशन वर्कर के शुरू होने से पहले काम शुरू नहीं करेगा (और अनुरोध नहीं भेजेगा ;) )।

आइए अपना एप्लिकेशन चलाएं और ब्राउज़र में डेवलपर कंसोल खोलें। यदि आपको इसमें '[MSW] Mocking enabled.' टेक्स्ट दिखाई देता है, तो आप बहुत अच्छे हैं और आपने सब कुछ सही ढंग से स्थापित किया है!!!