Mrr: रिएक्ट के लिए कुल एफआरपी

Mrr प्रतिक्रिया के लिए एक कार्यात्मक-प्रतिक्रियाशील पुस्तकालय है (मैं काल्पनिक टॉटोलॉजी के लिए माफी चाहता हूं)।

शब्द "प्रतिक्रियाशीलता" आमतौर पर एक संदर्भ FRP के रूप में Rx.js को संदर्भित करता है । हालाँकि, इस विषय पर हाल के लेखों की एक श्रृंखला हैबे ( [1] , [2] , [3] ) ने आरएक्स समाधानों की बोझिलता दिखाई, जो सरल उदाहरणों में स्पष्टता और सरलता में लगभग किसी अन्य दृष्टिकोण से हार गए। आरएक्स बड़ी और शक्तिशाली है, और उन समस्याओं को हल करने के लिए एकदम सही है जिसमें प्रवाह का अमूर्त खुद को बताता है (व्यवहार में, यह मुख्य रूप से अतुल्यकालिक कार्यों का समन्वय है)। लेकिन क्या आप लिखते हैं, उदाहरण के लिए, Rx पर एक सरल तुल्यकालिक रूप सत्यापन? क्या वह सामान्य अनिवार्यता की तुलना में आपके समय की बचत करेगा?

mrr यह साबित करने का प्रयास है कि एफआरएफ न केवल विशिष्ट "स्ट्रीमिंग" समस्याओं में एक सुविधाजनक और प्रभावी समाधान हो सकता है, बल्कि सबसे आम रूटीन फ्रंट-एंड कार्यों में भी हो सकता है।

प्रतिक्रियाशील प्रोग्रामिंग एक बहुत शक्तिशाली अमूर्तता है, फिलहाल इस दृश्य पर दो तरीकों से मौजूद है:

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

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

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

अक्सर प्रतिक्रिया पर एक एप्लिकेशन बनाते समय, कई अलग-अलग तकनीकों का उपयोग किया जाता है: घटक राज्य के लिए पुन: प्रस्ताव (या जल्द ही - हुक), वैश्विक राज्य के लिए Redux / mobx, साइड इफेक्ट के प्रबंधन के लिए Redux-observable (या थंक / गाथा) के साथ Rx और अतुल्यकालिक समन्वय। संपादक में कार्य। एक ही आवेदन के भीतर विभिन्न दृष्टिकोणों और प्रौद्योगिकियों के ऐसे "सलाद" के बजाय, श्री के साथ आप एक ही तकनीक और प्रतिमान का उपयोग कर सकते हैं।

Mrr इंटरफ़ेस Rx और समान पुस्तकालयों से भी काफी अलग है - यह अधिक घोषणात्मक है। प्रतिक्रियाशीलता अमूर्तता और घोषणात्मक दृष्टिकोण के लिए धन्यवाद, mrr आपको अभिव्यंजक और संक्षिप्त कोड लिखने की अनुमति देता है। उदाहरण के लिए, mrr पर मानक TodoMVC कोड की 50 पंक्तियों (JSX टेम्पलेट की गिनती नहीं) से कम लेता है।

लेकिन पर्याप्त विज्ञापन। क्या आपने एक बोतल में "प्रकाश" और "भारी" आरपी के लाभों को संयोजित करने का प्रबंधन किया था - आपको न्याय करना चाहिए, लेकिन पहले, कृपया कोड उदाहरण पढ़ें।

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

हमें स्टेशनों और तारीखों के विकल्प के साथ एक फॉर्म की आवश्यकता है:



प्रवेश स्टेशनों के लिए स्वत: पूर्ण होने वाले फ़ील्ड बनाएं।

import { withMrr } from 'mrr'; const stations = [ '', '', '', ' ', ... ] const Tickets = withMrr({ //    $init: { stationFromOptions: [], stationFromInput: '', }, //   - "" stationFromOptions: [str => stations.filter(s => s.indexOf(str)===0), 'stationFromInput'], }, (state, props, $) => { return (<div> <h3>    </h3> <div>  : <input onChange={ $('stationFromInput') } /> </div> <ul className="stationFromOptions"> { state.stationFromOptions.map(s => <li>{ s }</li>) } </ul> </div>); }); export default Tickets; 

mrr घटकों को withMrr फ़ंक्शन का उपयोग करके बनाया जाता है, जो एक प्रतिक्रियाशील लिंक आरेख (प्रवाह का विवरण) और एक रेंडर फ़ंक्शन को स्वीकार करता है। घटक के प्रॉप्स के साथ-साथ राज्य के लिए रेंडर कार्यों को पारित किया जाता है, जिसे अब पूरी तरह से mrr द्वारा नियंत्रित किया जाता है। इसमें प्रारंभिक (ब्लॉक $ इनिट) और प्रतिक्रियाशील कोशिकाओं के सूत्र मूल्यों द्वारा गणना की जाएगी।

अब हमारे पास दो सेल (या दो धाराएँ हैं, जो एक ही बात है): स्टेशनफ्रॉमइन्पुट , वे मान, जो उपयोगकर्ता इनपुट से $ हेल्पर (डेटा इनपुट एलिमेंट्स के लिए डिफ़ॉल्ट रूप से पास होकर ) और एक सेल से प्राप्त होते हैं। स्टेशनफ्रेम , नाम से मिलान स्टेशनों की एक सरणी युक्त।

स्टेशनफ्रॉमऑक्शंस के मूल्य की गणना स्वचालित रूप से हर बार की जाती है जब एक पैरेंट सेल एक फ़ंक्शन (" सूत्र " नामक एक्सेल फॉर्मूला के साथ सादृश्य द्वारा) फ़ंक्शन का उपयोग करके बदल दिया जाता है। Mrr अभिव्यक्तियों का वाक्यविन्यास सरल है: पहले स्थान पर फ़ंक्शन (या ऑपरेटर) है जिसके द्वारा सेल के मूल्य की गणना की जाती है, फिर उन कोशिकाओं की एक सूची होती है, जिन पर यह सेल निर्भर करता है: फ़ंक्शन के लिए उनके मान दिए जाते हैं। इस तरह के एक अजीब, पहली नज़र में, वाक्यविन्यास के कई फायदे हैं, जिस पर हम बाद में विचार करेंगे। अब तक, मृद तर्क यहाँ सामान्य रूप से Vue, Svelte और अन्य पुस्तकालयों में उपयोग किए जाने वाले संगणनीय चर के समान है, एकमात्र अंतर यह है कि आप शुद्ध कार्यों का उपयोग कर सकते हैं।

हम इनपुट क्षेत्र में सूची से चयनित स्टेशन के प्रतिस्थापन को लागू करते हैं। उपयोगकर्ता में से किसी एक पर क्लिक करने के बाद स्टेशनों की सूची को छिपाना भी आवश्यक है।

 const Tickets = withMrr({ $init: { stationFromOptions: [], stationFromInput: '', }, stationFromOptions: [str => stations.filter(s => str.indexOf(a) === 0), 'stationFromInput'], stationFrom: ['merge', 'stationFromInput', 'selectStationFrom'], optionsShown: ['toggle', 'stationFromInput', 'selectStationFrom'], }, (state, props, $) => { return (<div> <div>  : <input onChange={ $('stationFromInput') } value={ state.stationFrom }/> </div> { state.optionsShown && <ul className="stationFromOptions"> { state.stationFromOptions.map(s => <li onClick={ $('selectStationFrom', s) }>{ s }</li>) } </ul> } </div>); }); 

स्टेशनों की सूची में $ सहायक का उपयोग करके बनाया गया एक ईवेंट हैंडलर प्रत्येक विकल्प के लिए निश्चित मूल्यों का उत्सर्जन करेगा।

mrr अपने घोषणात्मक दृष्टिकोण, किसी भी उत्परिवर्तन के लिए विदेशी है। स्टेशन का चयन करने के बाद, हम सेल वैल्यू को "फोर्स" नहीं कर सकते। इसके बजाय, हम एक नया स्टेशनफ्रेम सेल बनाते हैं, जो मर्ज स्ट्रीम मर्ज ऑपरेटर (Rx पर एक समतुल्य समतुल्य है, गठबंधन का उपयोग करके), दो धाराओं के मूल्यों को एकत्रित करेगा: उपयोगकर्ता इनपुट ( स्टेशनफ्रेमइनप्यूट ) और स्टेशन चयन ( सिलेक्शनफ्रेमरोम )।

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

दर्ज किए गए पाठ को साफ़ करने के लिए एक बटन जोड़ें।

 const Tickets = withMrr({ $init: { stationFromOptions: [], stationFromInput: '', }, stationFromOptions: [str => stations.filter(s => str.indexOf(a) === 0), 'stationFromInput'], clearVal: [a => '', 'clear'], stationFrom: ['merge', 'stationFromInput', 'selectStationFrom', 'clearVal'], optionsShown: ['toggle', 'stationFromInput', 'selectStationFrom'], }, (state, props, $) => { return (<div> <div>  : <input onChange={ $('stationFromInput') } value={ state.stationFrom }/> { state.stationFrom && <button onClick={ $('clear') }></button> } </div> { state.optionsShown && <ul className="stationFromOptions"> { state.stationFromOptions.map(s => <li onClick={ $('selectStationFrom', s) }>{ s }</li>) } </ul> } </div>); }); 

अब हमारा स्टेशनफ्रॉम सेल, जो इनपुट क्षेत्र में पाठ की सामग्री के लिए जिम्मेदार है, अपने मूल्यों को दो से नहीं, बल्कि तीन धाराओं से इकट्ठा करता है। इस कोड को सरल बनाया जा सकता है। फॉर्म का mrr निर्माण [* सूत्र *, * ... सेल तर्क *] लिस्प में एस-अभिव्यक्तियों के समान है, और लिस्प के रूप में, आप मनमाने ढंग से ऐसे निर्माणों को एक दूसरे में घोंसला बना सकते हैं।

चलो बेकार समाशोधन सेल से छुटकारा पाएं और कोड को छोटा करें:

  stationFrom: ['merge', 'stationFromInput', 'selectStationFrom', [a => '', 'clear']], 

एक अनिवार्य शैली में लिखे गए कार्यक्रमों की तुलना एक खराब संगठित टीम के साथ की जा सकती है, जहां हर कोई लगातार एक-दूसरे को कुछ आदेश देता है (मैं विधि कॉल और परिवर्तन को संकेत देता हूं), इसके अलावा, दोनों प्रबंधक अधीनस्थ हैं, और इसके विपरीत। घोषणा कार्यक्रम विपरीत यूटोपियन चित्र के समान हैं: एक सामूहिक जहां हर कोई स्पष्ट रूप से जानता है कि उसे किसी भी स्थिति में कैसे कार्य करना चाहिए। ऐसी टीम में आदेशों की कोई आवश्यकता नहीं है, हर कोई बस अपने स्थानों पर है और जो हो रहा है उसके जवाब में काम कर रहा है।

किसी घटना के सभी संभावित परिणामों का वर्णन करने के बजाय (पढ़ें - कुछ परिवर्तन करने के लिए), हम उन सभी मामलों का वर्णन करते हैं जिनमें यह घटना हो सकती है, अर्थात्। सेल अन्य सेल में किसी भी बदलाव पर क्या मूल्य लेगा। अब तक के हमारे छोटे उदाहरण में, हमने स्टेशनफ्रॉम सेल और तीन स्थितियों का वर्णन किया है जो इसके मूल्य को प्रभावित करते हैं। अनिवार्य कोड के आदी एक प्रोग्रामर के लिए, ऐसा दृष्टिकोण असामान्य (या यहां तक ​​कि "बैसाखी", "विकृत") लग सकता है। वास्तव में, यह आपको कोड की संक्षिप्तता (और स्थिरता) के कारण प्रयास को बचाने की अनुमति देता है, जैसा कि हम व्यवहार में देखेंगे।

अतुल्यकालिक के बारे में क्या? क्या अजाक्स के साथ प्रस्तावित स्टेशनों की सूची को खींचना संभव है? कोई बात नहीं! संक्षेप में, यह mrr के लिए कोई फर्क नहीं पड़ता है कि फ़ंक्शन मान लौटाता है या वादा करता है। जब mrr वापस आ जाता है, तो वह अपने रिसोल्व के लिए प्रतीक्षा करेगा और प्राप्त डेटा को स्ट्रीम में "पुश" करेगा।

 stationFromOptions: [str => fetch('/get_stations?str=' + str).then(res => res.toJSON()), 'stationFromInput'], 

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

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

 const OptionsInput = withMrr(props => ({ $init: { options: [], }, val: ['merge', 'valInput', 'selectOption', [a => '', 'clear']], options: [props.getOptions, 'val'], optionsShown: ['toggle', 'valInput', 'selectOption'], }), (state, props, $) => <div> <div> <input onChange={ $('valInput') } value={ state.val } /> </div> { state.optionsShown && <ul className="options"> { state.options.map(s => <li onClick={ $('selectOption', s) }>{ s }</li>) } </ul> } { state.val && <div className="clear" onClick={ $('clear') }> X </div> } </div>) 

जैसा कि आप देख सकते हैं, आप प्रॉपर कंपोनेंट के एक फंक्शन के रूप में mrr सेल्स की संरचना को निर्दिष्ट कर सकते हैं (हालाँकि, इसे केवल एक बार क्रियान्वित किया जाएगा - इनिशियलाइज़ेशन पर, और प्रॉप्स में बदलाव का जवाब नहीं देंगे)।

घटकों के बीच संचार

अब इस घटक को मूल घटक से कनेक्ट करें और देखें कि कैसे mrr संबंधित घटकों को डेटा का आदान-प्रदान करने की अनुमति देता है।

 const getMatchedStations = str => fetch('/get_stations?str=' + str).then(res => res.toJSON()); const Tickets = withMrr({ stationTo: 'selectStationFrom/val', stationFrom: 'selectStationTo/val', }, (state, props, $, connectAs) => { return (<div> <OptionsInput { ...connectAs('selectStationFrom') } getOptions={ getMatchedStations } /> - <OptionsInput { ...connectAs('selectStationTo') } getOptions={ getMatchedStations } /> <input type="date" onChange={ $('date') } /> <button onClick={ $('searchTrains') }></button> </div>); }); 

मूल घटक को बाल घटक के साथ जोड़ने के लिए, हमें कनेक्टर्स फ़ंक्शन (रेंडर फ़ंक्शन के चौथे तर्क) का उपयोग करके इसे मापदंडों को पास करना होगा। इस मामले में, हम उस नाम को इंगित करते हैं जिसे हम चाइल्ड कंपोनेंट को देना चाहते हैं। इस तरह से एक घटक संलग्न करके, इस नाम से हम इसकी कोशिकाओं तक पहुंच सकते हैं। इस मामले में, हम वैल सेल्स को सुन रहे हैं। रिवर्स भी संभव है - मूल कोशिका के बच्चे के घटक से सुनो।

जैसा कि आप देख सकते हैं, यहाँ mrr एक घोषणात्मक दृष्टिकोण का अनुसरण करता है: कोई onChange कॉलबैक की आवश्यकता नहीं है, हमें कनेक्टर्स फ़ंक्शन में चाइल्ड घटक के लिए एक नाम निर्दिष्ट करने की आवश्यकता है, जिसके बाद हमें इसकी कोशिकाओं तक पहुंच मिलती है! इस मामले में, फिर से घोषणा की वजह से, किसी अन्य घटक के काम में हस्तक्षेप का कोई खतरा नहीं है - हमारे पास इसमें कुछ भी "बदलने" की क्षमता नहीं है, उत्परिवर्तित, हम केवल डेटा को "सुन" सकते हैं।

संकेत और मूल्य

अगला चरण चयनित मापदंडों के लिए उपयुक्त ट्रेनों की खोज है। अनिवार्य दृष्टिकोण में, हम संभवतः ऑनस्मिट फॉर्म सबमिट करने के लिए एक निश्चित प्रोसेसर लिखेंगे, जो आगे की कार्रवाई शुरू करेगा - एक अजाक्स अनुरोध और परिणामों का प्रदर्शन। लेकिन, जैसा कि आप याद करते हैं, हम कुछ भी "आदेश" नहीं कर सकते हैं! हम केवल फॉर्म की कोशिकाओं से प्राप्त कोशिकाओं का एक और सेट बना सकते हैं। एक और निवेदन लिखूँ।

 const getTrains = (from, to, date) => fetch('/get_trains?from=' + from + '&to=' + to + '&date=' + date).then(res => res.toJSON()); const Tickets = withMrr({ stationFrom: 'selectStationFrom/val', stationTo: 'selectStationTo/val', results: [getTrains, 'stationFrom', 'stationTo', 'date', 'searchTrains'], }, (state, props, $, connectAs) => { return (<div> <OptionsInput { ...connectAs('selectStationFrom') } getOptions={ getMatchedStations } /> - <OptionsInput { ...connectAs('selectStationTo') } getOptions={ getMatchedStations } /> <input type="date" onChange={ $('date') } /> <button onClick={ $('searchTrains') }></button> </div>); }); 

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

  results: [getTrains, '-stationFrom', '-stationTo', '-date', 'searchTrains'], 

सेल नाम के सामने केवल एक माइनस जोड़ें, और वोइला! अब, परिणाम केवल searchTrains सेल में परिवर्तन का जवाब देंगे।

इस मामले में, searchTrains सेल "सेल-सिग्नल" और स्टेशनफ्रॉम और अन्य की कोशिकाओं को "सेल-वैल्यू" के रूप में कार्य करता है। एक सिग्नल सेल के लिए, केवल वह क्षण जब मूल्यों "प्रवाह" के माध्यम से यह महत्वपूर्ण है, और यह किस प्रकार का डेटा होगा - वैसे भी: यह सिर्फ सच हो सकता है, "1" या जो भी (हमारे मामले में, ये डोम इवेंट ऑब्जेक्ट होंगे) )। एक वैल्यू सेल के लिए, यह उसका मूल्य है जो महत्वपूर्ण है, लेकिन एक ही समय में, इसके परिवर्तन के क्षण महत्वपूर्ण नहीं हैं। ये दो प्रकार की कोशिकाएँ परस्पर अनन्य नहीं हैं: कई कोशिकाएँ संकेत और मान दोनों हैं। Mrr में वाक्यविन्यास स्तर पर, इन दो प्रकार की कोशिकाएं किसी भी तरह से भिन्न नहीं होती हैं, लेकिन प्रतिक्रियाशील कोड लिखते समय इस तरह के अंतर की वैचारिक समझ बहुत महत्वपूर्ण है।

बंटती धाराएँ

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

 const Tickets = withMrr({ $init: { results: {}, } stationFrom: 'selectStationFrom/val', stationTo: 'selectStationTo/val', searchQuery: [(from, to, date) => ({ from, to, date }), '-stationFrom', '-stationTo', '-date', 'searchTrains'], results: ['nested', (cb, query) => { cb({ loading: true, error: null, data: null }); getTrains(query.from, query.to, query.date) .then(res => cb('data', res)) .catch(err => cb('error', err)) .finally(() => cb('loading', false)) }, 'searchQuery'], availableTrains: 'results.data', }, (state, props, $, connectAs) => { return (<div> <div> <OptionsInput { ...connectAs('selectStationFrom') } getOptions={ getMatchedStations } /> - <OptionsInput { ...connectAs('selectStationTo') } getOptions={ getMatchedStations } /> <input type="date" onChange={ $('date') } /> <button onClick={ $('searchTrains') }></button> </div> <div> { state.results.loading && <div className="loading">...</div> } { state.results.error && <div className="error"> . ,  .   .</div> } { state.availableTrains && <div className="results"> { state.availableTrains.map((train) => <div />) } </div> } </div> </div>); }); 

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

उपरोक्त उदाहरण वादों के साथ काम करने का एक मानक तरीका है, mrr में यह एक वादा ऑपरेटर के रूप में सामान्यीकृत है और आपको इसे संक्षिप्त करने की अनुमति देता है:

  results: ['promise', (query) => getTrains(query.from, query.to, query.date), 'searchQuery'], //     availableTrains: 'results.data', 

साथ ही, वादा ऑपरेटर सुनिश्चित करता है कि केवल सबसे हालिया वादे के परिणामों का उपयोग किया जाए।



उपलब्ध सीटों को प्रदर्शित करने के लिए घटक (सादगी के लिए हम विभिन्न प्रकार की कारों से मना कर देंगे)

 const TrainSeats = withMrr({ selectSeats: [(seatsNumber, { id }) => new Array(Number(seatsNumber)).fill(true).map(() => ({ trainId: id })), '-seatsNumber', '-$props', 'select'], seatsNumber: [() => 0, 'selectSeats'], }, (state, props, $) => <div className="train">  №{ props.num } { props.from } - { props.to }.   : { props.seats || 0 } { props.seats && <div>     : <input type="number" onChange={ $('seatsNumber') } value={ state.seatsNumber || 0 } max={ props.seats } /> <button onClick={ $('select') }></button> </div> } </div>); 

एक सूत्र में प्रॉप्स तक पहुंचने के लिए, आप विशेष $ प्रॉप्स बॉक्स की सदस्यता ले सकते हैं।

 const Tickets = withMrr({ ... selectedSeats: '*/selectSeats', }, (state, props, $, connectAs) => { ... <div className="results"> { state.availableTrains.map((train, i) => <TrainSeats key={i} {...train} {...connectAs('train' + i)}/>) } </div> } 

जब आप "चयनित" बटन पर क्लिक करते हैं तो हम चयनित स्थानों की संख्या लेने के लिए फिर से निष्क्रिय सुनने का उपयोग करते हैं। हम कनेक्टर्स फ़ंक्शन का उपयोग करके प्रत्येक चाइल्ड घटक को पैरेंट के साथ जोड़ते हैं। उपयोगकर्ता प्रस्तावित गाड़ियों में से किसी में भी सीटों का चयन कर सकता है, इसलिए हम "*" मास्क का उपयोग करके सभी बाल घटकों में परिवर्तन सुनते हैं।

लेकिन यहाँ समस्या यह है: उपयोगकर्ता पहले एक ट्रेन में सीटें जोड़ सकता है, फिर दूसरे में, ताकि नया डेटा पिछले वाले को पीस ले। डेटा को "संचित" कैसे करें? ऐसा करने के लिए, एक क्लोजर ऑपरेटर है, जो नेस्टेड और फ़नल के साथ मिलकर mrr का आधार बनाता है (सभी अन्य इन तीनों के आधार पर सिंटैक्टिक चीनी से अधिक कुछ नहीं हैं)।

  selectedSeats: ['closure', () => { let seats = []; //     return selectedSeats => { seats = [...seats, selectedSeats]; return seats; } }, '*/selectSeats'], 

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

  selectedSeats: [(seats, prev) => [...seats, ...prev], '*/selectSeats', '^'] 

अब उपयोगकर्ता को प्रत्येक चयनित टिकट के लिए पहले और अंतिम नाम दर्ज करना होगा।

 const SeatDetails = withMrr({}, (state, props, $) => { return (<div> { props.trainId } <input name="name" value={ props.name } onChange={ $('setDetails', e => ['name', e.target.value, props.i]) } /> <input name="surname" value={ props.surname } onChange={ $('setDetails', e => ['surname', e.target.value, props.i]) }/> <a href="#" onClick={ $('removeSeat', props.i) }>X</a> </div>); }) const Tickets = withMrr({ $init: { results: {}, selectedSeats: [], } stationFrom: 'selectStationFrom/val', stationTo: 'selectStationTo/val', searchQuery: [(from, to, date) => ({ from, to, date }), '-stationFrom', '-stationTo', '-date', 'searchTrains'], results: ['promise', (query) => getTrains(query.from, query.to, query.date), 'searchQuery'], availableTrains: 'results.data', selectedSeats: [(seats, prev) => [...seats, ...prev], '*/selectSeats', '^'] }, (state, props, $, connectAs) => { return (<div> <div> <OptionsInput { ...connectAs('selectStationFrom') } getOptions={ getMatchedStations } /> - <OptionsInput { ...connectAs('selectStationTo') } getOptions={ getMatchedStations } /> <input type="date" onChange={ $('date') } /> <button onClick={ $('searchTrains') }></button> </div> <div> { state.results.loading && <div className="loading">...</div> } { state.results.error && <div className="error"> . ,  .   .</div> } { state.availableTrains && <div className="results"> { state.availableTrains.map((train, i) => <TrainSeats key={i} {...train} {...connectAs('train' + i)}/>) } </div> } { state.selectedSeats.map((seat, i) => <SeatDetails key={i} i={i} { ...seat } {...connectAs('seat' + i)}/>) } </div> </div>); }); 

चयनित साइटस सेल में चयनित स्थानों की एक सरणी होती है। जैसे ही उपयोगकर्ता प्रत्येक टिकट के लिए नाम और उपनाम दर्ज करता है, हमें डेटा को सरणी के संबंधित तत्वों में बदलना होगा।

  selectedSeats: [(seats, details, prev) => { // ??? }, '*/selectSeats', '*/setDetails', '^'] 

मानक दृष्टिकोण हमारे लिए उपयुक्त नहीं है: सूत्र में, हमें यह जानने की जरूरत है कि कौन सी सेल बदल गई है और तदनुसार प्रतिक्रिया करें। मर्ज ऑपरेटर के रूपों में से एक हमारी मदद करेगा।

  selectedSeats: ['merge', { '*/selectSeats': (seats, prev) => { return [...prev, ...seats]; }, '*/setDetails': ([field, value, i], prev) => { prev[i][field] = value; return prev; }, '*/removeSeat': (i, prev) => { prev.splice(i, 1); return prev; }, }, '^'/*,       */], 

यह Redux Reducers की तरह एक सा है, लेकिन अधिक लचीले और शक्तिशाली सिंटैक्स के साथ। और आप सरणी को म्यूट करने से डर नहीं सकते, क्योंकि केवल एक सेल के सूत्र ने इस पर नियंत्रण किया है, क्रमशः, समानांतर परिवर्तन को बाहर रखा गया है (लेकिन तर्क के रूप में पारित होने वाले सरणियों को निश्चित रूप से इसके लायक नहीं है)।

प्रतिक्रियाशील संग्रह

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

यह था:

  selectedSeats: ['merge', { '*/selectSeats': (seats, prev) => { return [...prev, ...seats]; }, '*/setDetails': ([field, value, i], prev) => { prev[i][field] = value; return prev; }, '*/removeSeat': (i, prev) => { prev.splice(i, 1); return prev; }, 'addToCart': () => [], }, '^'] 

यह था:

  selectedSeats: ['coll', { create: '*/selectSeats', update: '*/setDetails', delete: ['merge', '*/removeSeat', [() => ({}), 'addToCart']] }] 

हालाँकि, सेटटेल्स स्ट्रीम में डेटा प्रारूप को थोड़ा बदलना होगा:

  <input name="name" onChange={ $('setDetails', e => [{ name: e.target.value }, props.i]) } /> <input name="surname" onChange={ $('setDetails', e => [{ surname: e.target.value }, props.i]) }/> 

Coll ऑपरेटर का उपयोग करते हुए, हम तीन थ्रेड्स का वर्णन करते हैं जो हमारे सरणी को प्रभावित करेंगे। इस मामले में, क्रिएट स्ट्रीम में स्वयं तत्व शामिल होने चाहिए, जो कि सरणी (आमतौर पर ऑब्जेक्ट्स) में जोड़ा जाना चाहिए। डिलीट स्ट्रीम डिलीट किए जाने वाले तत्वों के सूचकांकों को स्वीकार करता है ('* / removeSeat') और मास्क दोनों। मुखौटा {} सभी तत्वों को हटा देगा, और उदाहरण के लिए, मास्क {नाम: 'कार्ल'} कार्ल नाम के साथ सभी तत्वों को हटा देगा। अपडेट स्ट्रीम मानों के जोड़े को स्वीकार करता है: वह परिवर्तन जो तत्व (मुखौटा या फ़ंक्शन) के साथ किया जाना चाहिए, और उन तत्वों के सूचकांक या मुखौटा जिन्हें बदलने की आवश्यकता है। उदाहरण के लिए, [{उपनाम: 'जॉनसन'}, {}] सरणी के सभी तत्वों के लिए जॉनसन उपनाम निर्धारित करेगा।

टक्कर ऑपरेटर आंतरिक क्वेरी भाषा की तरह कुछ का उपयोग करता है, जिससे संग्रह के साथ काम करना आसान हो जाता है और इसे अधिक घोषणात्मक बना दिया जाता है।

JsFiddle में हमारे आवेदन का पूरा कोड ।

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

निष्कर्ष

श्री की शक्ति क्या है?

mrr आपको एक कार्यात्मक-प्रतिक्रियाशील शैली में React में एप्लिकेशन लिखने की अनुमति देता है (mrr को डिक्रिट रिएक्टिव के रूप में डिक्रिप्ट किया जा सकता है)। mrr बहुत अभिव्यंजक है - आप कम समय कोड की पंक्तियाँ लिखते हैं।

mrr मूल सार का एक छोटा सा सेट प्रदान करता है, जो सभी मामलों के लिए पर्याप्त है - यह लेख mrr की लगभग सभी मुख्य विशेषताओं और तकनीकों का वर्णन करता है। ( ). , — , , , .. mrr , .

( ), «», mrr — , . , , , — mrr ( mrr «--», ).

?

«» , . , , . , mrr , , , , Redux , state setState, .

?

, — , . , ClojureScript, , React . Redux, mrr , . , mrr « », , mrr .

?

, :) , , API , ( ), . , mrr React', (React ).

, !