बड़े पैमाने पर प्रतिक्रिया अनुप्रयोगों को विकसित करने के लिए व्यावहारिक दिशानिर्देश। भाग 2: राज्य प्रबंधन, मार्ग

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



भाग 1: बड़े पैमाने पर प्रतिक्रिया अनुप्रयोगों को विकसित करने के लिए व्यावहारिक दिशानिर्देश। योजना, कार्य, डेटा स्रोत और एपीआई

भाग 2: बड़े पैमाने पर प्रतिक्रिया अनुप्रयोगों को विकसित करने के लिए व्यावहारिक दिशानिर्देश। भाग 2: राज्य प्रबंधन, मार्ग

अनुप्रयोग राज्य प्रबंधन, Redux एकीकरण, रूटिंग संगठन

यहां हम इस बारे में बात करेंगे कि आप Redux की कार्यक्षमता को कैसे बढ़ा सकते हैं ताकि आवेदन में जटिल संचालन करने में सक्षम हो सकें। यदि इस तरह के तंत्र को खराब तरीके से लागू किया जाता है, तो वे भंडार को डिजाइन करने में उपयोग किए जाने वाले पैटर्न का उल्लंघन कर सकते हैं।

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

। ऐसे कार्य जिन्हें शुद्ध कार्यों से हल नहीं किया जा सकता है

निम्नलिखित परिदृश्य पर विचार करें। आपको एक कंपनी के लिए डिज़ाइन किए गए एप्लिकेशन पर काम करने की पेशकश की गई थी जो अचल संपत्ति बाजार में काम करती है। ग्राहक एक नई, बेहतर वेबसाइट प्राप्त करना चाहता है। आपके निपटान में REST API है, आपके पास Zapier का उपयोग करके तैयार किए गए सभी पृष्ठों के लेआउट हैं, आपने एक आवेदन योजना की रूपरेखा तैयार की है। लेकिन फिर एक भारी समस्या सामने आ गई।

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

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

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


Redux और Redux-saga स्टोरेज का उपयोग करके अनुप्रयोग आरेख

यहां, घटक GET.BLOGS कार्रवाई को GET.BLOGS है। एप्लिकेशन Redux-saga का उपयोग करता है, इसलिए यह अनुरोध इंटरसेप्ट किया जाएगा। उसके बाद, जनरेटर फ़ंक्शन पृष्ठभूमि में डेटा स्टोर से डेटा डाउनलोड करेगा और Redux द्वारा समर्थित एप्लिकेशन स्थिति को अपडेट करेगा।

यहां एक उदाहरण है कि लोडिंग प्रकाशनों के लिए जनरेटर फ़ंक्शन (ऐसे कार्यों को "सागा" कहा जाता है) वर्णित स्थिति में कैसा दिख सकता है। सागर का उपयोग अन्य परिदृश्यों में किया जा सकता है। उदाहरण के लिए, उपयोगकर्ता डेटा के भंडारण को व्यवस्थित करने के लिए (कहते हैं, यह टोकन हो सकता है), क्योंकि यह एक कार्य का एक और उदाहरण है जिसके लिए शुद्ध कार्य उपयुक्त नहीं हैं।

 ... function* fetchPosts(action) { if (action.type === WP_POSTS.LIST.REQUESTED) {   try {     const response = yield call(wpGet, {       model: WP_POSTS.MODEL,       contentType: APPLICATION_JSON,       query: action.payload.query,     });     if (response.error) {       yield put({         type: WP_POSTS.LIST.FAILED,         payload: response.error.response.data.msg,       });       return;         yield put({       type: WP_POSTS.LIST.SUCCESS,       payload: {         posts: response.data,         total: response.headers['x-wp-total'],         query: action.payload.query,       },       view: action.view,     });   } catch (e) {     yield put({ type: WP_POSTS.LIST.FAILED, payload: e.message });  ... 

यहाँ प्रस्तुत गाथा WP_POSTS.LIST.REQUESTED जैसी कार्रवाइयों की WP_POSTS.LIST.REQUESTED । ऐसी कार्रवाई प्राप्त करके, यह एपीआई से डेटा लोड करता है। डेटा प्राप्त करने के बाद, वह एक और कार्रवाई - WP_POSTS.LIST.SUCCESS भेजता है। इसके प्रसंस्करण से उचित रेड्यूसर का उपयोग करके भंडार को अपडेट किया जाता है।

▍ रिड्यूसर का परिचय

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

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

Reducers की शुरूआत कोड जुदाई का एक रूप है। रिएक्टर डेवलपर समुदाय उत्साहपूर्वक इस तकनीक को अपना रहा है। मैं reducers के कार्यान्वयन तंत्र की उपस्थिति और सुविधाओं को प्रदर्शित करने के लिए कोड के इस टुकड़े का उपयोग करूंगा।

पहले, Redux के साथ इसके एकीकरण को देखें:

 ... const withConnect = connect( mapStateToProps, mapDispatchToProps, ); const withReducer = injectReducer({ key: BLOG_VIEW, reducer: blogReducer, }); class BlogPage extends React.Component {  ... } export default compose( withReducer, withConnect, )(BlogPage); 

यह कोड BlogPage.js फ़ाइल का हिस्सा है जिसमें एप्लिकेशन घटक शामिल है।

यहां हम, निर्यात कमांड में, connect फ़ंक्शन का उपयोग नहीं करते connect , लेकिन फ़ंक्शन compose । यह Redux लाइब्रेरी के कार्यों में से एक है जो आपको कई कार्यों की रचना करने की अनुमति देता है। compose करने के compose पारित कार्यों की सूची को दाएं से बाएं या नीचे से ऊपर तक पढ़ा जाना चाहिए।

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

किसी रचना में राइट-मोस्ट फ़ंक्शन कई तर्क ले सकता है, लेकिन इसके बाद के कार्यों के लिए केवल एक तर्क पारित किया जा सकता है। परिणामस्वरूप, फंक्शन का उपयोग compose परिणामस्वरूप होने वाले फ़ंक्शन को कॉल करके, हम इसे पास करते हैं जो मूल कार्यों से लेता है, जो अन्य सभी के अधिकार में है। यही कारण है कि हमने अंतिम पैरामीटर के रूप में withConnect फ़ंक्शन के लिए withConnect फ़ंक्शन पारित किया। नतीजतन, compose फ़ंक्शन का उपयोग connect फ़ंक्शन की तरह ही किया जा सकता है।

▍ रूटिंग और रेडक्स

अनुप्रयोगों में रूटिंग समस्याओं को हल करने के लिए उपयोग किए जाने वाले कई उपकरण हैं। इस खंड में, हालांकि, हम प्रतिक्रिया-राउटर-डोम लाइब्रेरी पर ध्यान केंद्रित करेंगे। हम इसकी क्षमताओं का विस्तार करेंगे ताकि यह Redux के साथ काम कर सके।

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

इस दृष्टिकोण के साथ, बच्चे के घटक को props तंत्र के माध्यम से प्राप्त होता है, एक history वस्तु जिसमें कुछ गुण हैं जो वर्तमान उपयोगकर्ता सत्र के लिए विशिष्ट हैं। इस ऑब्जेक्ट में कुछ विधियाँ हैं जिनका उपयोग नेविगेशन को नियंत्रित करने के लिए किया जा सकता है।

यह रूटिंग विकल्प बड़े अनुप्रयोगों में समस्याएं पैदा कर सकता है। यह इस तथ्य के कारण है कि उनके पास एक केंद्रीकृत history वस्तु नहीं है। इसके अलावा, घटक जो <Route> साथ प्रदान नहीं किए जाते हैं वे history ऑब्जेक्ट के साथ काम नहीं कर सकते हैं। यहाँ एक उदाहरण का उपयोग कर <Route> :

 <Route path="/" exact component={HomePage} /> 

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

इसके कॉन्फ़िगरेशन के पूरा होने के बाद, Redux के माध्यम से नए रूटिंग सिस्टम का उपयोग किया जा सकता है। तो, आवेदन में नेविगेशन कार्रवाई भेजकर लागू किया जा सकता है।

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

 import { push } from 'connected-react-router' ... const mapDispatchToProps = dispatch => ({  goTo: payload => {    dispatch(push(payload.path));  }, }); class DemoComponent extends React.Component {  render() {    return (      <Child        onClick={          () => {            this.props.goTo({ path: `/gallery/`});                      />    } ... 

यहाँ goTo विधि एक क्रिया को goTo ब्राउज़र इतिहास स्टैक goTo आवश्यक URL goTo धकेलती है। पहले, goTo विधि को रिपॉजिटरी में goTo गया था। इसलिए, इस विधि को props ऑब्जेक्ट में DemoComponent में पास props जाता है।

गतिशील उपयोगकर्ता इंटरफ़ेस और बढ़ते अनुप्रयोग की आवश्यकताएं

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

▍ आलसी लोड हो रहा है और React.Suspense

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

नेटवर्क सबसिस्टम आमतौर पर अविश्वसनीय और त्रुटि प्रवण के रूप में माना जाता है।

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

लेकिन सॉफ्टवेयर के निर्माता "यह मेरा व्यवसाय नहीं है" जैसे वाक्यांशों के साथ अनुप्रयोगों के खराब-गुणवत्ता वाले काम को सही ठहराने की कोशिश नहीं करते हैं। उन्हें नेटवर्क की समस्याओं से निपटने के दिलचस्प तरीके मिले।

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


उपयोगकर्ता इस तरह का कुछ भी नहीं देख रहे हैं।

रिएक्ट सस्पेंस तकनीक आपको ऐसी समस्याओं से निपटने की अनुमति देती है। उदाहरण के लिए, यह आपको डेटा लोडिंग के दौरान एक निश्चित संकेतक प्रदर्शित करने की अनुमति देता है। यद्यपि यह मैन्युअल रूप से isLoaded संपत्ति को true सेट करके किया जा सकता है, लेकिन सस्पेंस API का उपयोग करने से कोड बहुत अधिक क्लीनर हो जाता है।

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

यहां बताया गया है कि ऐप बिना सस्पेंस का उपयोग किए कैसे काम करता है।


वह एप्लिकेशन जिसमें सस्पेंस का उपयोग नहीं किया जाता है

अनुप्रयोग-व्यापी isLoaded का उपयोग करने की तुलना में सस्पेंस समर्थन के साथ एक घटक को लैस करना बहुत आसान है। चलिए React.StrictMode में पैरेंट App कंटेनर डालकर शुरू React.StrictMode । हम यह सुनिश्चित करते हैं कि अनुप्रयोग में उपयोग किए जाने वाले रिएक्ट मॉड्यूल में से, ऐसे नहीं होंगे जिन्हें अप्रचलित माना जाता है।

 <React.Suspense fallback={<Spinner size="large" />}>  <ArtistDetails id={this.props.id}/>  <ArtistTopTracks />  <ArtistAlbums id={this.props.id}/> </React.Suspense> 

मुख्य सामग्री की लोडिंग के दौरान React.Suspense टैग में लिपटे हुए घटक, लोड और प्रदर्शन जो कि fallback प्रॉपर्टी में निर्दिष्ट है। हमें यह सुनिश्चित करने का प्रयास करना चाहिए कि fallback संपत्ति में उपयोग किए जाने वाले घटकों में सबसे कम संभव मात्रा है और यथासंभव सरल रूप से व्यवस्थित हैं।


निःशुल्क सस्पेंस का उपयोग करता है कि आवेदन

▍ अनुकूली घटक

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

उदाहरण के लिए, आवेदन में दो मॉडल हैं। उनमें से एक रेसिंग पटरियों के वर्णन के लिए अभिप्रेत है, और दूसरा - कारों के विवरण के लिए। कार सूची पृष्ठ वर्ग तत्वों का उपयोग करता है। उनमें से प्रत्येक में एक छवि और एक संक्षिप्त विवरण शामिल है।

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


ट्रैक के वर्णन के लिए कार और तत्व के विवरण के लिए तत्व

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

इन संस्थाओं में से प्रत्येक के लिए अलग स्वतंत्र घटकों का निर्माण सामान्य ज्ञान के विपरीत है।

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


खोज बार

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

 static propTypes = {  open: PropTypes.bool.isRequired,  setOpen: PropTypes.func.isRequired,  goTo: PropTypes.func.isRequired, }; 

इस तकनीक का उपयोग करके, आप ऐसे तत्वों को प्रस्तुत करते समय HTML कक्षाओं के उपयोग को नियंत्रित कर सकते हैं, जो आपको उनके स्वरूप को प्रभावित करने की अनुमति देता है।

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


पेजेशन पैनल

मान लीजिए कि एक निश्चित एप्लिकेशन को एक समान पैनल की आवश्यकता है। इस एप्लिकेशन पर काम करते समय, डेवलपर्स समय पर व्यक्त आवश्यकताओं का पालन करते हैं। ऐसी स्थिति में, सामग्री को पृष्ठों में तोड़ने के लिए उपयोग किए जाने वाले अनुकूली घटक को केवल कुछ गुणों को पारित करने की आवश्यकता होती है। यह URL और प्रति पृष्ठ तत्वों की संख्या है।

परिणाम

रिएक्ट इकोसिस्टम इन दिनों इतना परिपक्व हो गया है कि यह संभावना नहीं है कि किसी को कभी भी एप्लिकेशन विकास के किसी भी चरण में "साइकिल का आविष्कार" करने की आवश्यकता होगी। यद्यपि यह डेवलपर्स के हाथों में खेलता है, यह इस तथ्य की ओर जाता है कि यह चुनना मुश्किल हो जाता है कि प्रत्येक विशिष्ट परियोजना के लिए क्या ठीक है।

प्रत्येक परियोजना अपने दायरे और कार्यक्षमता के मामले में अद्वितीय है। प्रतिक्रिया अनुप्रयोगों को विकसित करने में एक भी दृष्टिकोण या सार्वभौमिक नियम नहीं है। इसलिए, विकास शुरू करने से पहले, इसे सही ढंग से योजना बनाना महत्वपूर्ण है।

योजना बनाते समय, यह समझना बहुत आसान है कि परियोजना के लिए कौन से उपकरण सीधे बनाए गए हैं और कौन से स्पष्ट रूप से उसके लिए उपयुक्त नहीं हैं, उसके लिए बहुत बड़ा है। उदाहरण के लिए, एक एप्लिकेशन जिसमें 2-3 पेज होते हैं और कुछ एपीआई के लिए बहुत कम अनुरोधों को पूरा करने के लिए डेटा स्टोर की आवश्यकता नहीं होती है, जिस पर हम बात करते हैं। मैं इन विचारों में और भी आगे जाने के लिए तैयार हूं, और कहूंगा कि छोटी परियोजनाओं में आपको Redux का उपयोग करने की आवश्यकता नहीं है।
एप्लिकेशन के नियोजन चरण में, इसके पृष्ठों के लेआउट को बनाते समय, यह देखना आसान है कि इन पृष्ठों पर कई समान घटकों का उपयोग किया जाता है। यदि आप ऐसे घटकों के कोड का पुन: उपयोग करने का प्रयास करते हैं या सार्वभौमिक घटकों को लिखने का प्रयास करते हैं, तो यह बहुत समय और प्रयास को बचाने में मदद करेगा।

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

प्रिय पाठकों! यदि आप किसी भी लाइब्रेरी या डेवलपमेंट मेथोडोलॉजी के बारे में जानते हैं जो बड़े पैमाने पर रिएक्ट एप्लिकेशन बनाते समय अच्छा प्रदर्शन करते हैं, तो कृपया उन्हें साझा करें।