React-Redux: क्या सभी घटक राज्यों को Redux स्टोर में रखा जाना चाहिए


89

कहो मेरे पास एक सरल टॉगल है:

जब मैं बटन पर क्लिक करता हूं, तो रंग घटक लाल और नीले रंग के बीच बदल जाता है

मैं इस तरह से कुछ करके इस परिणाम को प्राप्त कर सकता हूं।

index.js

Button: onClick={()=>{dispatch(changeColor())}}
Color: this.props.color ? blue : red

container.js

connect(mapStateToProps)(indexPage)

action_creator.js

function changeColor(){
 return {type: 'CHANGE_COLOR'}
}

reducer.js

switch(){
case 'CHANGE_COLOR':
return {color: true}

लेकिन यह कुछ के लिए लिखने के लिए बहुत सारे कोड का एक नरक है जिसे मैं 5 सेकंड में jQuery, कुछ वर्गों और कुछ चेस के साथ हासिल कर सकता था ...

इसलिए मुझे लगता है कि मैं वास्तव में पूछ रहा हूं कि मैं यहां क्या गलत कर रहा हूं?


6
प्रतिक्रिया-रिडक्स को कुछ के रूप में बेचा नहीं जाता है जो कि jquery से छोटा है। इसे लाने और चलाने के लिए निश्चित रूप से कुछ कोड की आवश्यकता होती है।
झटके

1
यहाँ एक नज़र डालें: github.com/rackt/redux/issues/1287 विषय पर बहुत अच्छी चर्चा है।
m0meni

1
धन्यवाद @ AR7 सही
l2silver

1
@ l2silver कोई समस्या नहीं है। मूल रूप से यह विचार है कि यदि उस घटक का रंग किसी और के लिए मायने नहीं रखता है, तो बस उस स्थिति को घटक के लिए आंतरिक रखें।
m0meni

2
AR7 का उल्लेख किया गया है: github.com/reactjs/redux/issues/1287
ptim

जवाबों:


155

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

बस इन सवालों को पूछें: क्या यह राज्य बाकी एप्लिकेशन के लिए महत्वपूर्ण है? क्या आवेदन के अन्य भाग उस राज्य के आधार पर भिन्न व्यवहार करेंगे? कई छोटे मामलों में, ऐसा नहीं होगा। ड्रॉप डाउन मेनू लें: यह तथ्य कि यह खुला है या बंद है, संभवत: ऐप के अन्य हिस्सों पर कोई प्रभाव नहीं पड़ेगा। इसलिए, इसे अपने स्टोर तक वायर करना शायद ओवरकिल है। यह निश्चित रूप से एक वैध विकल्प है, लेकिन वास्तव में आपको कोई लाभ नहीं देता है। आप this.stateइसका उपयोग करना और एक दिन कॉल करना बेहतर समझते हैं।

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

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


अरे, मुझे पता है कि इस सवाल का कोई निश्चित जवाब कभी नहीं होगा, लेकिन मुझे लगता है कि आपका तर्क यहाँ बहुत अच्छा लगता है
l2silver

3
सच कहूं तो मुझे वास्तव में ऐसा नहीं है कि उस फ्लक्स / रिडक्स चीज़ का उपयोग करने का क्या मतलब है। इवेंट संचालित मॉडल के साथ क्या समस्या थी?
जयरोज़ो

IMO, यह सही जवाब नहीं है। निर्भर करता है। प्रतिक्रिया स्थिति में ui राज्य को संग्रहित करने से रिडक्स स्टोर साफ हो जाएगा लेकिन यह गैर-कार्यात्मक घटक को समाप्त कर देगा जो कि परीक्षण करना मुश्किल है। यूआई राज्य को प्रतिक्रिया अवस्था में संचय करते समय, देव पर बहुत प्रयास किए जाएंगे, क्योंकि हमें अतिरिक्त रीड्यूसर लिखना होगा। हालाँकि, कई पैकेज हैं जो आपके ui राज्य को स्टोर करने के लिए बहुत आसान बनाने में मदद कर सकते हैं, अधिक जानकारी के लिए redux.js.org/docs/faq/OrganizingState.html देखें।
रॉन

19

Redux अक्सर पूछे जाने वाले प्रश्न: Redux के
इस भाग का आयोजन आधिकारिक डॉक्टर ने आपके प्रश्न का उत्तर दिया।

स्थानीय घटक स्थिति का उपयोग करना ठीक है । एक डेवलपर के रूप में, यह निर्धारित करना आपका काम है कि आपका आवेदन किस प्रकार का राज्य है, और राज्य के प्रत्येक टुकड़े को कहां रहना चाहिए। एक संतुलन ढूंढें जो आपके लिए काम करता है, और इसके साथ जाएं।

यह निर्धारित करने के लिए अंगूठे के कुछ सामान्य नियम कि किस तरह का डेटा Redux में डाला जाना चाहिए:

  • क्या एप्लिकेशन के अन्य हिस्से इस डेटा की परवाह करते हैं?
  • क्या आपको इस मूल डेटा के आधार पर आगे व्युत्पन्न डेटा बनाने में सक्षम होने की आवश्यकता है?
  • क्या एक ही डेटा का उपयोग कई घटकों को चलाने के लिए किया जा रहा है?
  • क्या आपके लिए इस राज्य को किसी दिए गए समय (यानी, समय यात्रा डिबगिंग) में बहाल करने में सक्षम होने का मूल्य है?
  • क्या आप डेटा को कैश करना चाहते हैं (यानी, यदि यह पहले से ही वहां मौजूद है तो फिर से रिक्वेस्ट करने के बजाय क्या है?)

6

@ AR7 द्वारा प्रदान किए गए महान लिंक को उजागर करने के उद्देश्य से, और क्योंकि यह लिंक कुछ समय पहले चला गया था:

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

कभी-कभी आप Redux राज्य से React राज्य में स्थानांतरित करना चाहते हैं (जब Redux में कुछ संग्रहीत करना अजीब हो जाता है) या अन्य तरीके से (जब अधिक घटकों को कुछ राज्य तक पहुंच की आवश्यकता होती है जो स्थानीय हुआ करते थे)।

अंगूठे का नियम है: जो भी कम अजीब है उसे करो।

दान अब्रामोव: https://github.com/reactjs/redux/issues/1287#issuecomment-135353578


-8

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

किसी भी समय आप नहीं Redux में एक घटक स्थिति परिवर्तन को संग्रहीत , तो वह परिवर्तन Redux परिवर्तनों के ढेर से पूरी तरह से खो जाता है और आपका एप्लिकेशन UI स्टोर के साथ सिंक से बाहर हो जाएगा। यदि यह आपके लिए महत्वपूर्ण नहीं है, तो अपने आप से पूछें कि Redux का उपयोग क्यों करें? आपका आवेदन इसके बिना कम जटिल होगा!

प्रदर्शन कारणों से, आप ऐसी this.setState()किसी भी चीज़ के लिए वापस गिरना चाह सकते हैं जो कई कार्यों को बार-बार भेजती है। उदाहरण के लिए: प्रत्येक बार Redux में इनपुट फ़ील्ड की स्थिति को संग्रहीत करने से उपयोगकर्ता की कुंजी खराब प्रदर्शन का कारण बन सकती है। आप इसे लेन-देन की तरह मानकर इसे हल कर सकते हैं: एक बार उपयोगकर्ता कार्रवाई "प्रतिबद्ध होने के बाद," Redux में अंतिम स्थिति को सहेजें।

आपकी मूल पोस्ट में उल्लेख किया गया है कि Redux तरीका "लिखने के लिए बहुत सारे कोड का नरक" है। हां, लेकिन आप स्थानीय घटक राज्य जैसे सामान्य पैटर्न के लिए सार का उपयोग कर सकते हैं।


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

1
तो फिर Redux का उपयोग क्यों करें? यदि आप Redux में सब कुछ नहीं डालते हैं, तो आप सभी सुविधाएँ खो देते हैं, जैसे कि devtools। यह वास्तव में सभी या कुछ भी नहीं है। यदि आप इस पोस्ट के शीर्ष उत्तर की तरह ड्रॉपडाउन मेनू के लिए setState () का उपयोग करते हैं, तो आप किसी भी समस्या का निवारण करने के लिए devtools का उपयोग नहीं कर सकते हैं जो आपके उपयोगकर्ता ड्रॉपडाउन मेनू में आ सकते हैं। जब आप सेटलेट () का उपयोग ओवरले के लिए करते हैं तो यह और बुरा होता है क्योंकि ओवरले दिखाए जाने से पहले और बाद में यात्रा करने का कोई तरीका नहीं होता है। यहां पर सेटस्ट्रेट () को छिड़कने में बहुत त्रुटि होती है क्योंकि देव को लगातार सोचना पड़ता है कि क्या टूट सकता है।
कुमार ५०१

अधिक विशिष्ट उत्तर के रूप में, कोडबेस में प्रत्येक चर को लॉग करना एक उपयोगी रूपक नहीं है क्योंकि प्रश्न इस बारे में है कि क्या उपयोग करना है this.setState()या नहीं dispatch(action...)। एक को this.setState()हर जगह उपयोग करने की आवश्यकता नहीं है, लेकिन जब आपको आवश्यकता होती है, तो मेरा सुझाव 99% मामलों के बजाय Redux का उपयोग करना है, this.setState()प्रदर्शन की चिंताओं के आधार पर 1% के लिए वापस गिरना ।
कुमार ३०

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

आप वास्तव में अपने एपीआई तर्क को डिबग करने में सक्षम नहीं हो सकते हैं। यही मेरा सवाल है। यह वास्तव में उन परिदृश्यों को दूर करने के लिए कठिन है जहां आप समय यात्रा को तोड़ देंगे इसलिए यह बेहतर है कि सभी राज्य को (चयन बॉक्स राज्य सहित) Redux में डाल दिया जाए जब तक कि कोई प्रदर्शन समस्या न हो।
कुमार ३०
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.