रिएक्ट थंक और रिएक्ट सागा रिएक्ट अनुप्रयोगों में साइड इफेक्ट से निपटने के लिए मिडलवेयर लाइब्रेरी हैं, विशेष रूप से एपीआई कॉल जैसे अतुल्यकालिक संचालन के प्रबंधन के लिए। दोनों आमतौर पर Redux के साथ उपयोग किए जाते हैं लेकिन थोड़े अलग उद्देश्यों और दृष्टिकोणों को पूरा करते हैं।

रिएक्ट थंक

1. अवलोकन:

रिएक्ट थंक एक मिडलवेयर है जो आपको एक्शन क्रिएटर्स लिखने की अनुमति देता है जो एक्शन ऑब्जेक्ट के बजाय फ़ंक्शन लौटाते हैं। यह एपीआई अनुरोधों या जटिल सिंक्रोनस लॉजिक (जैसे क्रियाओं की सशर्त प्रेषण) जैसे अतुल्यकालिक संचालन को संभालने के लिए उपयोगी है। लौटाया गया फ़ंक्शन डिस्पैच और गेटस्टेट को तर्क के रूप में प्राप्त करता है, जिससे आप अन्य कार्यों को डिस्पैच कर सकते हैं या फ़ंक्शन के भीतर वर्तमान स्थिति तक पहुंच सकते हैं।

2. मुख्य अवधारणाएँ:

• मिडिलवेयर: थंक एक मिडलवेयर है जो स्टोर की फ़ंक्शंस (यानी, थंक्स) को संभालने की क्षमता को बढ़ाता है।
• अतुल्यकालिक क्रियाएं: थंक के साथ, आप किसी कार्रवाई के प्रेषण में देरी कर सकते हैं या किसी निश्चित स्थिति या तर्क के आधार पर इसे सशर्त रूप से भेज सकते हैं।
• सरल: थंक अपेक्षाकृत सरल है, जिससे अधिकांश उपयोग के मामलों में इसका उपयोग करना आसान हो जाता है।

3. यह कैसे काम करता है:

• आम तौर पर, कार्रवाई निर्माता सादे जावास्क्रिप्ट ऑब्जेक्ट (क्रियाएं) लौटाते हैं।
• थंक के साथ, एक एक्शन क्रिएटर एक फ़ंक्शन ("थंक") लौटा सकता है जो डिस्पैच और गेटस्टेट प्राप्त करता है। इस फ़ंक्शन के अंदर, आप एसिंक्रोनस लॉजिक निष्पादित कर सकते हैं (उदाहरण के लिए, एपीआई से डेटा प्राप्त करना) और फिर वास्तविक कार्रवाई भेज सकते हैं।

4. उदाहरण:

यहां एक बुनियादी उदाहरण दिया गया है कि आप रिएक्ट ऐप में रिडक्स-थंक का उपयोग कैसे करेंगे:

   // Action Creator with Thunk
   export const fetchUser = () => {
     return async (dispatch) => {
       dispatch({ type: 'FETCH_USER_REQUEST' });
       try {
         const response = await fetch('/api/user');
         const data = await response.json();
         dispatch({ type: 'FETCH_USER_SUCCESS', payload: data });
       } catch (error) {
         dispatch({ type: 'FETCH_USER_FAILURE', payload: error });
       }
     };
   };

5. थंक के लाभ:

• सरलता: थंक को समझना और लागू करना आसान है।
• छोटा पदचिह्न: यह हल्का है और इसके लिए जटिल कॉन्फ़िगरेशन की आवश्यकता नहीं है।
• प्रेषण पर सीधा नियंत्रण: कार्रवाई कब और कैसे भेजी जाती है, इस पर आपका अधिक नियंत्रण होता है।

6. कमियां:

• स्केल करना कठिन: जटिल अतुल्यकालिक प्रवाह के लिए, नेस्टेड तर्क और बहुत सारी डिस्पैच कॉल के साथ, थंक गड़बड़ हो सकता है।
• कम संरचना: थंक साइड इफेक्ट्स के प्रबंधन के लिए एक विशेष संरचना लागू नहीं करता है, जिसे अगर ठीक से नहीं संभाला गया तो असंगत कोड हो सकता है।

रिएक्ट सागा

1. अवलोकन:

रिएक्ट सागा एक मिडलवेयर है जो आपको जनरेटर फ़ंक्शंस का उपयोग करके अधिक व्यवस्थित तरीके से साइड इफेक्ट्स को संभालने की अनुमति देता है। थंक जैसे फ़ंक्शन लौटाने के बजाय, यह अतुल्यकालिक संचालन को प्रबंधित करने और आपके तर्क के प्रवाह को नियंत्रित करने के लिए एक "प्रभाव" प्रणाली का उपयोग करता है। सागा लंबे समय तक चलने वाली पृष्ठभूमि प्रक्रियाएं हैं जो भेजे गए कार्यों को सुन सकती हैं और एपीआई कॉल, डेटा फ़ेचिंग और अन्य कार्यों जैसे साइड इफेक्ट्स कर सकती हैं।

2. मुख्य अवधारणाएँ:

• जेनरेटर फ़ंक्शन: सागा को ईएस6 जनरेटर फ़ंक्शन (फ़ंक्शन*) का उपयोग करके कार्यान्वित किया जाता है, जो आपको एसिंक्रोनस कोड लिखने की अनुमति देता है जो सिंक्रोनस दिखता है।
• वॉचर्स और वर्कर: सागाओं को अक्सर "वॉचर" सागा (जो भेजे गए कार्यों को सुनते हैं) और "कार्यकर्ता" सागा (जो दुष्प्रभावों को संभालते हैं) में विभाजित किया जाता है।
• टेक, पुट, कॉल: Redux-Saga प्रभाव निर्माता (टेक, पुट, कॉल इत्यादि) प्रदान करता है ताकि यह नियंत्रित किया जा सके कि साइड इफेक्ट कब ट्रिगर करना है, क्रियाएं भेजनी हैं और एपीआई को कॉल करना है।

3. यह कैसे काम करता है:

• Redux-Saga के साथ, आप सागा (लंबे समय तक चलने वाले पृष्ठभूमि कार्य) को परिभाषित करते हैं जो दुष्प्रभावों से निपटने के लिए जिम्मेदार हैं।
• सागा को आम तौर पर जेनरेटर फ़ंक्शंस के रूप में लिखा जाता है और कॉल (फ़ंक्शंस को लागू करने के लिए) और पुट (कार्यों को भेजने के लिए) जैसे प्रभाव उत्पन्न करते हैं।
• सागा टेकएवरी या टेकलैटेस्ट के साथ किसी भी कार्रवाई के लिए टेक या सुनने के साथ विशिष्ट कार्यों की प्रतीक्षा भी कर सकता है।

4. उदाहरण:

रेडक्स-सागा का उपयोग कैसे किया जा सकता है इसका एक बुनियादी उदाहरण यहां दिया गया है:

   import { call, put, takeLatest } from 'redux-saga/effects';

   // Worker saga: will be fired on FETCH_USER_REQUEST actions
   function* fetchUser(action) {
     try {
       const response = yield call(fetch, '/api/user');
       const data = yield response.json();
       yield put({ type: 'FETCH_USER_SUCCESS', payload: data });
     } catch (e) {
       yield put({ type: 'FETCH_USER_FAILURE', message: e.message });
     }
   }

   // Watcher saga: spawns a new fetchUser task on each FETCH_USER_REQUEST
   function* mySaga() {
     yield takeLatest('FETCH_USER_REQUEST', fetchUser);
   }

   export default mySaga;

5. रिडक्स-सागा के लाभ:

• जटिल दुष्प्रभावों के लिए बेहतर: सागा का प्रभाव-आधारित दृष्टिकोण अधिक स्केलेबल है और जटिल अतुल्यकालिक प्रवाह के प्रबंधन के लिए उपयुक्त है (उदाहरण के लिए, पुनः प्रयास, डिबाउंसिंग, या कैस्केडिंग एपीआई कॉल से निपटना)।
• परीक्षण योग्य: सागा का परीक्षण करना आसान है क्योंकि वे जनरेटर फ़ंक्शन के आसपास बनाए गए हैं।
• घोषणात्मक: प्रभावों के उपयोग से यह स्पष्ट हो जाता है कि क्या दुष्प्रभाव होंगे, जिससे प्रवाह अधिक पूर्वानुमानित हो जाता है।
• रद्दीकरण और अनुक्रम: सागा चल रहे कार्यों को रद्द करना या घटनाओं के अनुक्रम प्रवाह को लागू करना आसान बनाता है (जैसे एकाधिक कार्यों की प्रतीक्षा करना)।

6. कमियां:

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

तुलना: रिएक्ट थंक बनाम रिएक्ट सागा

कौन सा कब उपयोग करें?

• रिएक्ट थंक का उपयोग करें यदि:

  • आपके एप्लिकेशन में अपेक्षाकृत सरल अतुल्यकालिक आवश्यकताएं हैं, जैसे बुनियादी एपीआई अनुरोध और शर्तों के आधार पर प्रेषण।
  • आप अधिक बॉयलरप्लेट के बिना हल्का, समझने में आसान समाधान चाहते हैं।

• रिएक्ट सागा का उपयोग करें यदि:

  • आपको अधिक जटिल अतुल्यकालिक प्रवाहों को प्रबंधित करने की आवश्यकता है, जैसे पुन: प्रयास, कार्रवाई अनुक्रमण, दौड़ की स्थिति, या एक दूसरे पर निर्भर कई कार्य।
  • आप घोषणात्मक दृष्टिकोण पसंद करते हैं और दुष्प्रभावों पर बेहतर नियंत्रण चाहते हैं।
  • आपके ऐप को लंबे समय तक बेहतर परीक्षणशीलता और कोड रखरखाव की आवश्यकता होती है।