राज्य एक प्रतिक्रिया आवेदन का एक बड़ा हिस्सा है, यही कारण है कि रेडक्स आमतौर पर इसके साथ जोड़ा जाता है। वह डेटा अक्सर डेटाबेस से आता है, जिसके लिए एक अनुरोध और प्रतिक्रिया की आवश्यकता होती है। कुछ अनुप्रयोगों के लिए, यह संचार स्थिर हो सकता है। यह केवल प्रतिक्रिया घटकों के भीतर प्रबंधन करने की कोशिश कर रहा है।
यह कुछ नई समस्याएं भी पेश करता है - क्या होता है यदि यह धीरे-धीरे लोड होता है, या बिल्कुल लोड नहीं होता है? एसिंक्रोनस डेटा से निपटने वाले प्रत्येक घटक को इन परिदृश्यों को संभालने के लिए तर्क होना होगा।
एक 'थंक' एक अवधारणा है जो इस स्थिति में मदद कर सकती है। प्रत्येक थंक एक फ़ंक्शन होता है जो एक और फ़ंक्शन देता है। उस फ़ंक्शन को बाद में कॉलबैक की तरह, बाद में कहा जा सकता है। यदि हम एक क्रिया वस्तु के बजाय एक थंक भेज सकते हैं, तो हम किसी अन्य घटना के लिए प्रतिक्रिया में कुछ अतिरिक्त तर्क जोड़ सकते हैं।
Redux Thunk एक लाइब्रेरी है जो प्रेषित कार्यों और reducer के बीच में बैठती है। जब यह एक थंक को भेजता है, तो यह रिटर्न फ़ंक्शन में कुछ विधियों को पास करता है जिसका उपयोग सफलता या त्रुटि घटना की तरह आगे की कार्रवाइयों को प्रेषित करने के लिए किया जा सकता है।
इस ट्यूटोरियल में, हम एक JSON फ़ाइल के बजाय सर्वर से डेटा को खींचने में मदद करने के लिए थंक्स का उपयोग करेंगे [3 9] फ़ोटोशेयर
एक नई साइट परियोजना मिली, लेकिन इसे सरल रहने की आवश्यकता है? यहां हमारे गाइड सबसे अच्छे हैं [3 9] वेबसाइट निर्माता
तथा [3 9] वेब होस्टिंग सर्विस। दूसरों के साथ फाइलें साझा करना? आपकी मिल [3 9] घन संग्रहण सही।फ़ाइलों को डाउनलोड करें इस ट्यूटोरियल के लिए।
इस परियोजना के लिए दो भाग हैं - फ्रंट एंड साइट और बैक एंड सर्वर यह चलता है। जबकि ट्यूटोरियल सामने के अंत में केंद्रित है, हमें फ़ोटो लाने के लिए चल रहे सर्वर की आवश्यकता है। प्रोजेक्ट फ़ाइलों को डाउनलोड करें और साइट और सर्वर दोनों के लिए निर्भरता स्थापित करें। दोनों के लिए सर्वर चलाएं और उन्हें पृष्ठभूमि में चलाने के लिए छोड़ दें।
/ * एक टर्मिनल अंदर / साइट * /
& gt; धागा
& gt; यार्न शुरू
/ * एक टर्मिनल अंदर / सर्वर * /
& gt; धागा
& gt; यार्न शुरू
रेडक्स थंक एक है [3 9] मध्यस्थ
- कार्यक्षमता जो क्रियाओं और reducers के बीच बैठती है जो बदल सकती है कि वे कार्य कैसे व्यवहार करते हैं। रेडक्स मिडलवेयर के कई सेट का समर्थन करता है जो पूरे एप्लिकेशन को कवर करता है। जब स्टोर बनाया जाता है तो वे जोड़े जाते हैं [3 9] लिखें तरीका। के लिए मिडलवेयर जोड़ें [3 9] रचनात्मक index.js के भीतर विधि। [9 3] आयात {applymiddleware, लिखें} "Redux" से; "रेडक्स-थंक" से थंक आयात करें; [...] कॉन्स स्टोर = रचनात्मक ( rootrereducer, रचना ( applymiddleware (थंक), देवटूल ) );अब हमें करने की पहली बात यह है कि फोटो को गैलरी में लोड करना है। नियमित कार्यों की तरह, हमें विभिन्न राज्यों के लिए एक्शन निर्माता की आवश्यकता होती है कि एक एसिंक्रोनस कॉल ले जाएगा। सबसे अधिक होगा [3 9] शुरू
, [3 9] सफलता तथा [3 9] त्रुटि कार्रवाई। ये redux जानते हैं कि जावास्क्रिप्ट क्या करने में व्यस्त है। अंदर [3 9] क्रियाएं / तस्वीरें / photos.js , इन विभिन्न राज्यों के लिए तीन एक्शन निर्माता सेट अप करें। [9 3] निर्यात कॉन्स लोड गैलरीस्टार्ट = () = & जीटी; () टाइप करें: LOAD_GALLERY_START}); निर्यात कॉन्स लोड GallerySuccess = तस्वीरें = & gt; () टाइप करें: LOAD_GALLERY_SUCCESS, तस्वीरें }); निर्यात कॉन्स लोड GalleryError = () = & gt; () टाइप करें: LOAD_GALLERY_ERROR});थंक्स बिल्कुल एक्शन रचनाकारों के समान काम करते हैं। हम अभी भी वापसी मूल्य भेजते हैं, लेकिन इस बार यह किसी वस्तु के बजाय एक फ़ंक्शन देता है। मिडलवेयर जिसे हमने पहले सेट किया था, वह लौटा समारोह में एक प्रेषण विधि पास करेगा। यह हमें प्रारंभिक प्रेषण के बाद Redux पर अधिक क्रियाएं भेजने में सक्षम बनाता है। बनाओ [3 9] लोड गैलरी
विधि जो एक फ़ंक्शन देता है। अभी के लिए, यह दिखाने के लिए एक कार्रवाई प्रेषित करें कि गैलरी अभी भी लोड हो रही है। [9 3] निर्यात कॉन्स लोड गैलरी = () = & जीटी; प्रेषण = & gt; { डिस्पैच (LoadGalleryStart ()); };अब हम शुरुआत में स्थापित किए गए सर्वर से लाने के लिए तैयार हैं। हम इसका उपयोग करके ऐसा कर सकते हैं [3 9] अक्ष
- एक पैकेज विभिन्न ब्राउज़रों में वादे के साथ काम करने के लिए डिज़ाइन किया गया है। आयात [3 9] अक्ष और भीतर तस्वीरों के लिए एक अनुरोध करें [3 9] लोड गैलरी । यदि वादा हल हो जाता है, तो सफलता की कार्रवाई को प्रेषित करें, और यदि त्रुटि कार्रवाई को प्रेषण न करें। इसके साथ, थंक की संरचना पूरी हो गई है। [9 3] "एक्सियोस" से एक्सिओस आयात करें; [...] वापसी अक्ष .गेट ("http: // localhost: 3001 / तस्वीरें") .then (प्रतिक्रिया = & gt; डिस्पैच ( LoadGallerySuccess (Response.Data)) .catch (() = & gt; डिस्पैच ( LoadGalleryError ()));
थंक प्रेषित होने तक कुछ भी नहीं करेगा। हम किसी भी अन्य कार्रवाई की तरह एक प्रतिक्रिया घटक के भीतर ऐसा कर सकते हैं। तस्वीरों को लोड करना शुरू करने का एक अच्छा समय तब होता है जब उपयोगकर्ता मुख्य गैलरी को देखता है। हम प्रतिक्रिया का उपयोग कर सकते हैं [3 9] componentdidmount
एक ट्रिगर के रूप में लाइफसाइक्ल विधि, गैलरी की जांच करने के बाद पहले से लोड नहीं किया गया है। अंदर [3 9] घटक / कंटेनर / गैलरी / gallery.js डिस्पैच ए [3 9] लोड गैलरी इसे जोड़कर कार्रवाई [3 9] Mapdispatchtoprops और इसे भीतर बुला रहा है [3 9] componentdidmount । [9 3] componentdidmount () { अगर (यह .props.photosloaded) { this.props.loadgallery (); } } निर्यात const mapdispatchtoprops = प्रेषण = & gt; () LoadGallery: () = & gt; डिस्पैच (LoadGallery ()), });
जब तस्वीरें सर्वर से वापस आती हैं, तो हम एक प्रेषित करते हैं [3 9] LOAD_GALLERY_SUCCESS
तस्वीरों के साथ कार्रवाई। हमें इसे राज्य में प्राप्त करने की आवश्यकता है [3 9] तस्वीरें reducer। की ओर जाना [3 9] reducers / तस्वीरें / photos.js और सफलता की कार्रवाई के लिए एक मामला जोड़ें। पेलोड में सरणी के रूप में सभी तस्वीरें शामिल हैं। एक बार राज्य अद्यतन होने के बाद, फोटो चयनकर्ता प्रदर्शित होने के लिए गैलरी घटक के माध्यम से फ़ोटो पास करता है। [9 3] केस LOAD_GALLERY_SUCCESS: वापसी action.photos;वर्तमान में, तस्वीरें अचानक लोड होने के बाद दिखाई देती हैं। धीमे कनेक्शन पर, उपयोगकर्ता जब तक यह कभी भी समाप्त नहीं होता है तब तक उपयोगकर्ता रिक्त स्क्रीन पर देखेगा। हम जो भी हो रहा है उसके साथ इंटरफ़ेस को अद्यतित रखने के लिए हमारे द्वारा भेजे जाने वाले कार्यों को यूआई रेड्यूसर में भी उठाया जा सकता है। UI Reducer के भीतर लोडिंग और त्रुटि झंडे को अपडेट करें [3 9] reducers / ui / ui.js
। [9 3] केस LOAD_GALLERY_ERROR: वापसी {... राज्य, लोड हो रहा है: गलत, त्रुटि: TRUE}; केस LOAD_GALLERY_START: वापसी {... राज्य, लोड हो रहा है: सही, त्रुटि: झूठी}; केस LOAD_GALLERY_SUCCESS: वापसी {... राज्य, लोड हो रहा है: झूठी};गैलरी फ़ोटो के साथ ही, हमें विभिन्न यूआई राज्य मूल्यों को रेडक्स से बाहर निकालने के लिए चयनकर्ताओं की आवश्यकता होती है। हम इन्हें गैलरी में पास कर सकते हैं, जो तब भी एक सत्य होने पर विभिन्न तत्वों को प्रस्तुत करेगा। में [3 9] चयनकर्ता / UI / UI.JS
, मूल्यों को प्राप्त करने के लिए कुछ कार्यों को जोड़ें। [9 3] निर्यात कॉन्स isgalleryerrored = राज्य = & gt; State.ui.Error; निर्यात कॉन्स isgalleryloading = राज्य = & gt; state.ui.loading;चयनकर्ताओं के साथ, उन्हें अब जोड़ा जा सकता है [3 9] गेलरी
कंटेनर घटक। यहां उन्हें जोड़ने का मतलब है कि गैलरी को प्रदर्शित करने के लिए जिम्मेदार घटक को यह जानने की आवश्यकता नहीं है कि डेटा कैसे पहुंचा है। की ओर जाना [3 9] कंटेनर / गैलरी / gallery.js और चयनकर्ताओं को जोड़ें [3 9] MapStatetoprops । अगले चरण में राज्य को प्रदर्शित करने में सहायता के लिए मूल्यों के लिए स्थिरांक बनाएं। [9 3] {त्रुटि, लोड हो रहा है, तस्वीरें} = यह .props; [...] निर्यात कॉन्स मैपस्टेटेटोपॉप्स = राज्य = & gt; () त्रुटि: isgalleryerrored (राज्य), लोड हो रहा है: isgalleryloading (राज्य), });
जबकि हमारे पास त्रुटि और लोडिंग प्रोप हैं, वर्तमान में जब वे सक्रिय होते हैं तो इंगित करने के लिए कोई यूआई नहीं है। ये प्रोप बूलियन मान हैं, जिसका अर्थ है कि जब हम सत्य होते हैं तो हम घटकों के प्रदर्शन को टॉगल कर सकते हैं। सुनिश्चित करने के लिए रेंडर विधि अपडेट करें [3 9] & lt; त्रुटि & gt;
तथा [3 9] & lt; लोडिंग और जीटी; आवश्यक होने पर घटक गैलरी के बजाय प्रस्तुत करते हैं। [9 3] यदि (त्रुटि) { वापसी & lt; त्रुटि / & gt ;; } अगर (लोड हो रहा है) { वापसी & lt; लोड हो रहा है / & gt ;; }गैलरी लोड के साथ, हम एक व्यक्तिगत तस्वीर पर जा सकते हैं। किसी भी फोटो में क्लिक करने और पृष्ठ को रीफ्रेश करने से फोटो बैक अप नहीं होता है, क्योंकि इस पृष्ठ पर अभी तक गैलरी लोड करने के लिए कोई निर्देश नहीं है। खुला हुआ [3 9] कंटेनर / फोटो / photo.js
और गैलरी को लोड करें [3 9] componentdidmount की तरह [3 9] गेलरी घटक। [3 9] प्रकाशित यदि वे पहले से ही गैलरी के भीतर लोड हो गए हैं तो चेक फ़ोटो को फिर से लोड करने की कोशिश नहीं करेगा। [9 3] अगर (यह .props.photosloaded) { this.props.loadgallery (); }
उपयोगकर्ता उस फोटो पर क्लिक कर सकता है जहां वे एक टिप्पणी छोड़ना चाहते हैं। फोटो प्रस्तुति घटक चलाएगा [3 9] AddNewComment
जब ऐसा होता है तो प्रोप फ़ंक्शन। के अंदर [3 9] AddNewComment फ़ंक्शन, उस बिंदु की गणना करें जहां उपयोगकर्ता ने फ़ोटो के भीतर क्लिक किया है। जब इसे सहेजा जाता है तो सर्वर को एक गोल पूर्णांक प्रतिशत मूल्य की आवश्यकता होती है। [9 3] कॉन्स फोटो = e.target .getBoundingClientRect (); कॉन्स टॉप = ई। क्लाइंटक्स - फोटो। लिफ्ट; कॉन्स बाएं = e.clienty - photo.top; const topc = math.round ((शीर्ष /) photo.width) * 100); const beftpc = math.round ((बाएं /) photo.height) * 100);गणना की गई स्थिति के साथ, हमें टिप्पणी के बारे में Redux बताने की आवश्यकता है ताकि यह टिप्पणी फॉर्म प्रदर्शित कर सके। स्क्रीन पर नई टिप्पणी जोड़ने के लिए पहले से ही एक कार्रवाई की गई है। जोड़ना [3 9] AddNewComment
जांच [3 9] Mapdispatchtoprops और क्लिक की स्थिति की गणना के बाद इसे कॉल करें। [9 3] this.props.addnewcomment ( TOPPC, LEFTPC); [...] निर्यात const mapdispatchtoprops = प्रेषण = & gt; () AddNewComment: (शीर्ष, बाएं) = & gt; डिस्पैच (addnewcomment (शीर्ष, बाएं)), });जब नई टिप्पणी जानकारी Redux को पारित किया जाता है, तो हमें इसे फोटो प्रस्तुतिक घटक में पास करने की आवश्यकता होती है। यह इसे उस स्थिति में फॉर्म दिखाने में सक्षम बनाता है। खोजें [3 9] गेटनवॉम्पमेंट
चयनकर्ता, इसे जोड़ें [3 9] MapStatetoprops और प्रोप को पास करें [3 9] & lt; फोटो & gt; । [9 3] निर्यात कॉन्स मैपस्टेट्रोपॉप्स = (राज्य, प्रोप) = & gt; () न्यूकॉममेंट: गेटन न्यूकॉममेंट (राज्य), }); & lt; फोटो [...] न्यूकॉममेंट = { this.props.newcomment} / & gt;
अब फोटो पर क्लिक करके नया टिप्पणी फॉर्म लाएगा। यह अपना खुद का घटक है। जब फॉर्म जमा किया जाता है, तो यह एक कॉल करता है [3 9] टिप्पणी भेजें
प्रोप समारोह और पारित हो जाता है। यह एक थंक है जो हम करेंगे। खुलना [3 9] कंटेनर / नवाचार / newcomment.js और थंक को जोड़ें [3 9] Mapdispatchtoprops । प्रस्तुत किए गए प्रस्तुति घटक में उस प्रोप को पास करें। [9 3] & lt; नवीनता [...] सबममेंट = {सबमॉमेंट} / & gt; निर्यात const mapdispatchtoprops = प्रेषण = & gt; () सबमिशन: टिप्पणी = & gt; प्रेषण ( सबमिशन (टिप्पणी)) });एक नई टिप्पणी जोड़ने के लिए थंक में एक शुरुआत, सफलता और त्रुटि कार्रवाई सहित गैलरी के लाने की एक समान संरचना है। इस थंक में एक अतिरिक्त तर्क दिया गया है - [3 9] गेटस्टेट
समारोह। यह डेटा को पकड़ने के लिए वर्तमान स्थिति तक सीधे पहुंच को सक्षम बनाता है। बनाना [3 9] टिप्पणी भेजें थंक इन [3 9] क्रियाएं / नवीनता / newcomment.js । प्रत्येक टिप्पणी एक फोटो और उपयोगकर्ता से जुड़ी है। इस ट्यूटोरियल के लिए, उपयोगकर्ता आईडी में हार्ड-कोडेड है [3 9] उपयोगकर्ता reducer। [9 3] निर्यात कॉन्स सबमिशन = टिप्पणी = & gt; (प्रेषण, गेटस्टेट) = & gt; { डिस्पैच (सबमिशनस्टार्ट ()); const purtphotoid = GetCurrentPhotoid (गेटस्टेट ()); उपयोगकर्ता = GetCurrentUser (GetState ()); const {बाएं, शीर्ष} = getnewcomment (गेटस्टेट ()); };जगह में सभी आवश्यक डेटा के साथ, हम टिप्पणी जमा कर सकते हैं। AXIOS में एक है [3 9] पद
निपटने के लिए विधि [3 9] पद अनुरोध, दूसरे तर्क के साथ उस अनुरोध में भेजने के लिए डेटा होने के नाते। सर्वर को अपेक्षा करने के लिए सांप मामले में डेटा में गुजरने के लिए थंक में अनुरोध जोड़ें। [9 3] वापसी अक्ष ।पद( "http: // लोकलहोस्ट: 3001 / टिप्पणियाँ", { USER_ID: USER.ID, photo_id: वर्तमान फोटो, टिप्पणी, बाएं, ऊपर })यदि अक्षरों का वादा हल या अस्वीकार करता है, तो हमें इसके बारे में आवेदन बताने की आवश्यकता है। यदि यह सफलतापूर्वक हल हो जाता है, तो सर्वर टिप्पणी की सामग्री को वापस कर देगा। हमें सफलता की कार्रवाई के साथ पारित करना चाहिए। यदि यह खारिज हो जाता है, तो एक त्रुटि कार्रवाई आग। के साथ वादा अपडेट करें [3 9] तब फिर
तथा [3 9] पकड़ ब्लॉक। [9 3] .then (({डेटा: { आईडी, टिप्पणी, बाएं, शीर्ष}}) = & gt; प्रेषण ( सबमिटक्यूमेंट्स ( आईडी, टिप्पणी, बाएं, शीर्ष, उपयोगकर्ता, वर्तमानPhotoid) ) ) .catch (() = & gt; डिस्पैच ( सबमिटसेनर ()));
अभी, एक बार जब टिप्पणी सफलतापूर्वक जोड़ा जाता है तो यह स्क्रीन से साफ़ हो जाता है लेकिन पृष्ठ रीफ्रेश होने तक दिखाई नहीं देता है। हम नई टिप्पणी को चुनने के लिए फोटो reducer को अपडेट कर सकते हैं और उनमें से बाकी की तरह प्रदर्शित करने के लिए इसे अपनी टिप्पणियों की सरणी में जोड़ सकते हैं। Reducer / तस्वीरें / photos.js खोलें और कार्रवाई को संभालने के लिए एक मामला जोड़ें। यह सुनिश्चित करने के लिए राज्य की एक प्रति बनाएं कि हम मौजूदा राज्य को गलती से परिवर्तित न करें।
[9 3] केस सबमिट_कॉमेंट_स्यूस: {आईडी, टिप्पणी, शीर्ष, बाएं, उपयोगकर्ता, photoid} = action.payload; const newstate = json.parse ( Json.stringify (राज्य)); कॉन्स फोटो = newstate.find ( फोटो = & gt; photo.id === फोटोॉइड); phote.comments.push ({ आईडी, टिप्पणी, बाएं, शीर्ष, उपयोगकर्ता }); न्यूस्टेट लौटें;आखिरकार, यदि कोई अन्य टिप्पणी खुली है और उपयोगकर्ता एक नई टिप्पणी जोड़ना चाहता है, तो यूआई भी अव्यवस्थित हो जाता है। यदि एक नई टिप्पणी की जा रही है तो हमें टिप्पणी बॉक्स को छिपाना चाहिए। हम मौजूदा में हुक कर सकते हैं [3 9] Add_new_comment
स्पष्ट करने के लिए कार्रवाई [3 9] टिप्पणी करना मूल्य। की ओर जाना [3 9] reducer / ui / ui.js और उसके लिए एक मामला जोड़ें। [9 3] केस add_new_comment: वापसी { ... राज्य, टिप्पणी खोलें: अपरिभाषित };यह लेख मूल रूप से क्रिएटिव वेब डिज़ाइन पत्रिका के अंक 283 में प्रकाशित किया गया था वेब डिजाइनर । यहां अंक 283 खरीदें या वेब डिजाइनर की सदस्यता लें ।
[3 9] संबंधित आलेख:
एफ़िनिटी डिजाइनर मैक, विंडोज और के लिए एक लोकप्रि..
मध्ययुगीन चर्च, हरे चरागाह और स्लेट-टॉप वाले फार्..
यह वेबसाइट उपयोगकर्ताओं के लिए केवल एक लिंक पर क्..
2 का पृष्ठ 1: डिजाइन और बनावट 3 डी मंजिल टा�..
यह पोस्ट आपको सिखाएगा कि पेस्टल के साथ एक परिदृश्..
क्या आप डिजाइन सिस्टम के बारे में अधिक सीखने की ..