रेडक्स-सागा चैनलों के बारे में संक्षेप में

शुभ दोपहर, प्यारे दोस्तों।

इस लेख में मैं Redux-saga चैनल के तंत्र को सरल और संक्षिप्त रूप में वर्णन करना चाहूंगा, वास्तविक मामलों के करीब उदाहरणों का उपयोग करके, मुझे आशा है कि इसने मेरे लिए काम किया।

तो चलिए शुरू करते हैं।

वॉच-एंड-फोर्क मॉडल समस्या

मान लें कि हमारे पास निम्न फ़ॉर्म का एक नियमित वॉच-एंड-फोर्क मॉडल है:

import { take, fork } from 'redux-saga/effects' function* watchRequest() { while (true) { const {payload} = yield take('INIT_REQUEST'); // ,     yield fork(makeRequest, payload); } } function* makeRequest(payload) { //   } 

यह दृष्टिकोण खराब है क्योंकि जब एक के बाद एक कई INIT_REQUEST घटनाओं को पकड़ा जाता है, तो क्रमशः कई makeRequest जाएंगे। जो बदले में उन्हें "दौड़" का कारण बना सकता है।

और यहाँ चैनल तंत्र हमारी सहायता के लिए आता है।

चैनल में बफ़र्स होते हैं, जिससे आने वाली घटनाओं (उदाहरण के लिए, INIT_REQUEST ) को पूरा करने में मदद मिलती है, और उनके अनुक्रमिक निष्पादन को व्यवस्थित किया जाता है (उदाहरण के लिए, makeRequest को कई बार क्रमिक रूप से निष्पादित makeRequest जाएगा)।

मोटे तौर पर, अनुक्रमिक निष्पादन के लिए चैनल एक FIFO कतार बनाते हैं।

इवेंट स्रोत द्वारा वर्गीकृत करें:

• channel - घटनाओं को मैन्युअल रूप से put का उपयोग करके कतारबद्ध किया जाता है;
• actionChannel - घटनाओं को actionChannel स्टोर के पास पकड़ा जाता है;
• eventChannel - एक बाहरी घटना स्रोत, सबसे अधिक बार एक वेब सॉकेट;

इसलिए, हम संक्षेप में प्रत्येक का विश्लेषण करेंगे।

चैनल पर अधिक

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

 channel([buffer]) 

इसका एक एकल buffer तर्क है - संचित बफर (हम नीचे अधिक विस्तार से बफ़र्स की जांच करेंगे)।

कार्रवाई पर अधिक

यह अक्सर सबसे अधिक उपयोग किया जाता है जब रेडक्स स्टोर से घटनाओं का जवाब देना आवश्यक होता है।

 actionChannel(pattern, [buffer]) 

इसमें दो तर्क दिए गए हैं:

• pattern - वांछित घटनाओं का पैटर्न, साथ ही साथ take ;
• buffer - संचय बफर;

उपयोग का एक संक्षिप्त उदाहरण:

 import { take, actionChannel, call } from 'redux-saga/effects' function* watchRequest() { const requestChannel = yield actionChannel('INIT_REQUEST') while (true) { const {payload} = yield take(requestChannel); //      yield call(makeRequest, payload); } } function* makeRequest(payload) { //   } 

EventChannel पर अधिक

आमतौर पर वे इसके माध्यम से वेब सॉकेट के माध्यम से संचार की समस्या को हल करते हैं।

 eventChannel(subscribe, [buffer], [matcher]) 

इसमें तीन तर्क दिए गए हैं:

• subscribe एक ऐसा कार्य है जो बाहरी ईवेंट स्रोत (उदाहरण में नीचे, सेटटाइमआउट) को आरंभ करता है। तर्कों में, कॉलबैक को एमिटर कहा जाता है, जिसे स्रोत से चैनल पर डेटा भेजने के लिए आवश्यक होने पर कॉल किया जाएगा। वापसी समारोह को बंद करना चाहिए;
• buffer - संचय बफर;
• matcher - आने वाले संदेशों को फ़िल्टर करने के लिए फ़ंक्शन।

उपयोग का एक संक्षिप्त उदाहरण:

 import { eventChannel, END } from 'redux-saga' import { take, put, call } from 'redux-saga/effects' function initSocketChannel(query) { return eventChannel(emitter => { //     web socket const handshakeTimeoutId = setTimeout(() => { emitter('handshake - ok'); }, 100); const messageTimeoutId = setTimeout(() => { emitter('message'); }, 500); const endTimeoutId = setTimeout(() => { emitter(END); }, 1000); //     return () => { clearTimeout(handshakeTimeoutId); clearTimeout(messageTimeoutId); clearTimeout(endTimeoutId); } } ) } export function* saga() { const chan = yield call(initSocketChannel, query) try { while (true) { const message = yield take(chan); //    END   brake console.log(`socket : ${message}`) } } finally { console.log('socket terminated') } } 

निश्चित रूप से आपने END स्थिरांक की उपस्थिति को देखा - यह क्रिया है, जिसका अर्थ है चैनल के साथ संचार का अंत।

स्रोत कोड में, redux-saga को निम्नानुसार दर्शाया गया है:

 var CHANNEL_END_TYPE = '@@redux-saga/CHANNEL_END'; var END = { type: CHANNEL_END_TYPE }; var isEnd = function isEnd(a) { return a && a.type === CHANNEL_END_TYPE; }; 

और eventChannel स्रोत कोड में eventChannel निम्नलिखित स्क्रिप्ट देखते हैं

 function eventChannel(subscribe) { … if (isEnd(input)) { close(); return; } ... } 

बफर क्या है?

यह उल्लेखनीय है, क्योंकि प्रत्येक चैनल में एक आधार बफर होता है, और इसके साथ, प्रसंस्करण के लिए एक कतार बनती है।

एक बफर बनाने का उदाहरण:

 import { buffers } from 'redux-saga' const buffer = buffers.sliding(5); 

buffers विभिन्न रणनीतियों के साथ बफ़र्स बनाने के लिए एक कारखाने का एक उदाहरण हैं।

केवल 5 रणनीतियाँ, विधियाँ उनके अनुरूप हैं:

• buffers.none() - कोई बफ़रिंग नहीं, नए संदेश खो जाएंगे यदि कोई प्रतिभागी लंबित नहीं हैं;
• buffers.fixed(limit) - नए संदेश सीमा तक बफ़र किए जाएंगे। अतिप्रवाह त्रुटि के परिणामस्वरूप परिणाम होगा। डिफ़ॉल्ट सीमा 10 है;
• buffers.expanding(initialSize) - निश्चित की तरह, लेकिन अतिप्रवाह बफर को गतिशील रूप से विस्तारित करने का कारण होगा;
• buffers.dropping(limit) तय के समान है, लेकिन अतिप्रवाह चुपचाप संदेशों को छोड़ देगा;
• buffers.sliding(limit) तय के समान ही है, लेकिन अतिप्रवाह अंत में एक नया संदेश जोड़ देगा और बफर में सबसे पुराना संदेश हटा देगा।

इसके बजाय बंद करने की

इसलिए, हमने जांच की कि चैनल तंत्र का आविष्कार क्यों किया गया था, और किन व्यावहारिक कार्यों का उपयोग किया जाता है।

मुझे उम्मीद है कि सामान्य विचार पढ़ने के बाद और दुनिया थोड़ी आसान हो गई है।