रिएक्टिवएक्स रिडक्स

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

बेशक, यह बहुत ही क्रियात्मक और असुविधाजनक है, इसलिए एक ऐसे डेवलपर को ढूंढना मुश्किल है जो केवल "देशी" मिडलवेयर का उपयोग करता है। लाइब्रेरी और फ्रेमवर्क जैसे कि थंक, सागा और जैसे हमेशा बचाव में आते हैं।

अधिकांश कार्यों के लिए, वे पर्याप्त हैं। लेकिन क्या होगा अगर एक अनुरोध भेजने या एक टाइमर बनाने की तुलना में थोड़ा अधिक जटिल तर्क की आवश्यकता है? यहाँ एक छोटा सा उदाहरण है:

async dispatch => { setTimeout(() => { try { await Promise .all([fetchOne, fetchTwo]) .then(([respOne, respTwo]) => { dispatch({ type: 'SUCCESS', respOne, respTwo }); }); } catch (error) { dispatch({ type: 'FAILED', error }); } }, 2000); } 

इस तरह के कोड को देखना भी दर्दनाक है, लेकिन इसे बनाए रखना और विस्तार करना असंभव है। जब अधिक परिष्कृत त्रुटि हैंडलिंग की आवश्यकता हो तो क्या करें? यदि आपको दोहराने के अनुरोध की आवश्यकता है तो क्या होगा? और अगर मैं इस सुविधा का पुन: उपयोग करना चाहता हूं?

मेरा नाम दिमित्री समोखावलोव है, और इस पोस्ट में मैं आपको बताऊंगा कि ऑब्जर्वेबल की अवधारणा क्या है और इसे Redux के साथ कैसे व्यवहार में लाया जाए, और Redux-Saga की क्षमताओं के साथ इन सभी की तुलना करें।

एक नियम के रूप में, ऐसे मामलों में, redux-saga लें। ठीक है, हम साग को फिर से लिखते हैं:

 try { yield call(delay, 2000); const [respOne, respTwo] = yield [ call(fetchOne), call(fetchTwo) ]; yield put({ type: 'SUCCESS', respOne, respTwo }); } catch (error) { yield put({ type: 'FAILED', error }); } 

यह बिल्कुल बेहतर हो गया है - कोड लगभग रैखिक है, बेहतर दिखता है और पढ़ता है। लेकिन विस्तार करना और पुन: उपयोग करना अभी भी मुश्किल है, क्योंकि गाथा केवल थन के समान ही अनिवार्य है।

एक और दृष्टिकोण है। यह बिल्कुल दृष्टिकोण है, और अतुल्यकालिक कोड लिखने के लिए सिर्फ एक अन्य पुस्तकालय नहीं है। इसे आरएक्स कहा जाता है (वे ऑब्जर्वबल्स, रिएक्टिव स्ट्रीम आदि भी हैं)। हम इसका उपयोग करेंगे और अवलोकन योग्य उदाहरण पर फिर से लिखेंगे:

 action$ .delay(2000) .switchMap(() => Observable.merge(fetchOne, fetchTwo) .map(([respOne, respTwo]) => ({ type: 'SUCCESS', respOne, respTwo })) .catch(error => ({ type: 'FAILED', error })) 

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

ऑब्ज़र्वेबल को एक फ़ंक्शन के रूप में प्रस्तुत करना सुविधाजनक है जो मूल्यों की एक धारा (अनुक्रम) देता है। अवलोकनीय के तीन मुख्य राज्य हैं - अगला ("अगला मान दें"), त्रुटि ("एक त्रुटि हुई") और पूर्ण ("मान समाप्त हो गए, देने के लिए और कुछ नहीं है")। इस संबंध में, यह प्रोमिस की तरह एक सा है, लेकिन इसमें अंतर है कि इन मूल्यों पर पुनरावृति करना संभव है (और यह अवलोकन योग्य सुपरपॉवर में से एक है)। आप ऑब्जर्वेबल में कुछ भी लपेट सकते हैं - टाइमआउट, http रिक्वेस्ट, DOM इवेंट, सिर्फ js ऑब्जेक्ट्स।



दूसरी महाशक्ति ऑब्जर्वेबल ऑपरेटर हैं। एक ऑपरेटर एक ऐसा फ़ंक्शन है जो एक ऑब्जर्वेबल को स्वीकार और वापस करता है, लेकिन मूल्यों की धारा पर कुछ कार्रवाई करता है। निकटतम सादृश्यता जावास्क्रिप्ट से नक्शा और फ़िल्टर है (वैसे, ऐसे ऑपरेटर आरएक्स में हैं)।



मेरे लिए व्यक्तिगत रूप से सबसे उपयोगी ज़िप, फोर्कजॉइन और फ्लैटपॉपर ऑपरेटर थे। उनके उदाहरण का उपयोग करना, ऑपरेटरों के काम की व्याख्या करना सबसे आसान है।

जिप ऑपरेटर बहुत सरलता से काम करता है - यह कुछ ऑब्जर्वेबल (9 से अधिक नहीं) लेता है और एक सरणी में रिटर्न देता है जो वे उत्सर्जन करते हैं।

 const first = fromEvent("mousedown"); const second = fromEvent("mouseup"); zip(first, second) .subscribe(e => console.log(`${e[0].x} ${e[1].x}`)); //output [119,120] [120,233] … 

सामान्य तौर पर, जिप के काम को योजना द्वारा दर्शाया जा सकता है:



जिप का उपयोग किया जाता है यदि आपके पास कई अवलोकनीय हैं और आपको उनसे लगातार मूल्यों को प्राप्त करने की आवश्यकता है (इस तथ्य के बावजूद कि उन्हें अलग-अलग अंतराल पर, समकालिक या नहीं) उत्सर्जित किया जा सकता है। DOM इवेंट्स के साथ काम करते समय यह बहुत उपयोगी है।

ForkJoin स्टेटमेंट एक अपवाद के साथ ज़िप के समान है - यह प्रत्येक ऑब्जर्वेबल से केवल नवीनतम मान लौटाता है।



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



कोड में भी स्पष्ट:

 const observable = of("Hello"); const promise = value => new Promise(resolve => resolve(`${value} World`); observable .flatMap(value => promise(value)) .subscribe(result => console.log(result)); //output "Hello World" 

सबसे अधिक बार, फ्लैटपाइप का उपयोग बैकएंड अनुरोधों में किया जाता है, साथ ही स्विचपाइप और कॉनकटैब।
मैं Redux में Rx का उपयोग कैसे कर सकता हूं? इसके लिए एक अद्भुत रेडक्स-अवलोकन योग्य पुस्तकालय है। इसकी वास्तुकला इस तरह दिखती है:



सभी वेधशाला संचालक और उन पर कार्रवाई विशेष मिडलवेयर के रूप में की जाती है जिन्हें महाकाव्य कहा जाता है। प्रत्येक महाकाव्य इनपुट के रूप में कार्रवाई करता है, इसे ऑब्जर्वेबल में लपेटता है, और एक्शन को अवलोकन के रूप में भी वापस करना चाहिए। आप एक नियमित कार्रवाई नहीं कर सकते, यह एक अंतहीन लूप बनाता है। आइए एक छोटा सा महाकाव्य लिखें जो आपी से अनुरोध करता है।

 const fetchEpic = action$ => action$ .ofType('FETCH_INFO') .map(() => ({ type: 'FETCH_START' })) .flatMap(() => Observable .from(apiRequest) .map(data => ({ type: 'FETCH_SUCCESS', data })) .catch(error => ({ type: 'FETCH_ERROR', error })) ) 

Redux-Observable और Redux-saga की तुलना किए बिना ऐसा करना असंभव है। ऐसा लगता है कि कई लोग कार्यक्षमता और क्षमताओं के करीब हैं, लेकिन ऐसा बिल्कुल नहीं है। सगा एक पूरी तरह से अनिवार्य उपकरण है, अनिवार्य रूप से साइड इफेक्ट्स के साथ काम करने के तरीकों का एक सेट है। अवलोकनीय अतुल्यकालिक कोड लिखने की एक मूल रूप से अलग शैली है, यदि आप चाहते हैं, तो एक अलग दर्शन।

मैंने समस्याओं को हल करने के लिए संभावनाओं और दृष्टिकोण का वर्णन करने के लिए कई उदाहरण लिखे।

मान लीजिए हमें एक टाइमर लागू करने की आवश्यकता है जो कार्रवाई से बंद हो जाएगा। यहाँ यह सागा में ऐसा दिखता है:

 while(true) { const timer = yield race({ stopped: take('STOP'), tick: call(wait, 1000) }) if (!timer.stopped) { yield put(actions.tick()) } else { break } } 

अब Rx का उपयोग करें:

 interval(1000) .takeUntil(action$.ofType('STOP')) 

मान लीजिए कि सागा में रद्द करने के साथ अनुरोध को लागू करने के लिए एक कार्य है:

 function* fetchSaga() { yield call(fetchUser); } while (yield take('FETCH')) { const fetchSaga = yield fork(fetchSaga); yield take('FETCH_CANCEL'); yield cancel(fetchSaga); } 

Rx पर सब कुछ सरल है:

 switchMap(() => fetchUser()) .takeUntil(action$.ofType('FETCH_CANCEL')) 

अंत में, मेरे पसंदीदा। एक एपीआई अनुरोध को लागू करें, विफलता के मामले में 2 सेकंड की देरी के साथ 5 से अधिक बार अनुरोध नहीं करें। यहाँ हमारे पास सगाओं में है:

 for (let i = 0; i < 5; i++) { try { const apiResponse = yield call(apiRequest); return apiResponse; } catch (err) { if(i < 4) { yield delay(2000); } } } throw new Error(); } 

Rx पर क्या होता है:

 .retryWhen(errors => errors .delay(1000) .take(5)) 

यदि आप गाथा के पेशेवरों और विपक्षों का सारांश देते हैं, तो आपको निम्नलिखित चित्र मिलते हैं:



सगा सीखना आसान है और बहुत लोकप्रिय है, इसलिए समुदाय में आप लगभग सभी अवसरों के लिए व्यंजनों को पा सकते हैं। दुर्भाग्य से, अनिवार्य शैली वास्तव में लचीले ढंग से सागा के उपयोग को रोकती है।

Rx की पूरी तरह से अलग स्थिति है:



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

इसके अलावा, जब वेधशाला के साथ काम करते हैं, तो विशेष रूप से सावधान रहना महत्वपूर्ण है और हमेशा अच्छी तरह से समझते हैं कि क्या हो रहा है। अन्यथा, आप अस्पष्ट त्रुटियों या अपरिभाषित व्यवहार पर ठोकर खा सकते हैं।

 action$ .ofType('DELETE') .switchMap(() => Observable .fromPromise(deleteRequest) .map(() => ({ type: 'DELETE_SUCCESS'}))) 

एक बार जब मैंने एक महाकाव्य लिखा, जो काफी सरल काम किया था - टाइप 'DELETE' की प्रत्येक क्रिया के साथ, एक एपीआई विधि को कहा जाता था जिसने आइटम को हटा दिया। हालांकि, परीक्षण के दौरान समस्याएं थीं। परीक्षक ने अजीब व्यवहार के बारे में शिकायत की - कभी-कभी जब आपने डिलीट बटन पर क्लिक किया तो कुछ भी नहीं हुआ। यह पता चला है कि स्विचपॉपर ऑपरेटर एक समय में केवल एक ऑब्जर्वेबल के निष्पादन का समर्थन करता है, दौड़ की स्थिति के खिलाफ एक प्रकार का संरक्षण।

परिणामस्वरूप, मैं कुछ सिफारिशें देता हूं जिनका मैं पालन करता हूं और उन सभी से आग्रह करता हूं जो Rx के साथ काम करना शुरू करते हैं:

• सावधान रहें।
• प्रलेखन की जाँच करें।
• सैंडबॉक्स में चेक करें।
• परीक्षण लिखें।
• तोप से गौरैया को गोली मत चलाना।