/ / Redux / ReactJS: मुझे किसी राज्य का विज़ुअल विवरण कहाँ संग्रहीत करना चाहिए? - अभिकर्मक, प्रतिक्रिया-मूलक, Redux, अभिक्रिया-Redux

Redux / ReactJS: मुझे राज्य के दृश्य विवरण कहां स्टोर करना चाहिए? - प्रतिक्रिया, प्रतिक्रिया-मूल, redux, प्रतिक्रिया-redux

मैं एक यात्रा लागत कैलकुलेटर बना रहा हूं। आप इसे बताते हैं कि इस महीने आपको कहां / कैसे मेट्रो ले जाने की संभावना है और यह आपको टिकटों के सर्वश्रेष्ठ संयोजन का पता लगाने में मदद करता है। दिखाने के लिए मुख्य परिणाम सबसे अच्छा विकल्प + मूल्य है।

मैं इसे विस्तार योग्य बनाना चाहता हूं, ताकि यदि उपयोगकर्ताकुल कीमत पर क्लिक करने पर, यह एक एनीमेशन के साथ एक तालिका को खोल देगा, जिसमें बताया जाएगा कि कीमत किस चीज से बनी है थोड़ा सा ओवरसाइज़ करना, यह कुछ इस तरह होगा:

<22 महीने में एक यात्रा -> टिकट क्लास ए का उपयोग करें, यह होगालागत $ 734> | | उपयोगकर्ता वेब पर क्लिक करता है या मोबाइल पर टैप करता है | v <22 महीने का दौरा -> टिकट क्लास ए का उपयोग करें, इसकी कीमत $ 734 होगी - यात्राएं 1-10 की लागत $ 340 ($ 34 प्रत्येक) - यात्राएं ११-२० लागत $ ३३० ($ ३३ प्रत्येक) - यात्राएं २१-२२ लागत $ ६४ ($ ३२ प्रत्येक)

विस्तारित / नहीं-विस्तारित के बारे में राज्य को संग्रहीत करने के लिए एक अच्छी जगह क्या है?

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

    फिर लाइन पर क्लिक करने से कार्रवाई उत्पन्न होगी, रिड्यूसर द्वारा संसाधित की जाएगी और कुछ को संशोधित करेगी expanded राज्य में कुंजी।

  2. घटकों के अंदर, क्योंकि यह निम्न स्तर के UI एनीमेशन का व्यवसाय तर्क और यहां तक ​​कि इन-ऐप नेविगेशन के साथ कोई लेना-देना नहीं है।

    तब घटक के अंदर क्लिकों को संभाला जाएगा और वे CSS क्लास की स्थापना करके e.g को लपेटेंगे / अनचेक करेंगे।

  3. कुछ अलग?

आप अपने ऐप्स में क्या उपयोग करते हैं? क्या इस तरह की स्थितियों के लिए कुछ मानक पैटर्न है?

उत्तर:

उत्तर № 1 के लिए 1

मेरा मानना ​​है कि आपका # 2 यहाँ सही है। आम तौर पर, एक व्यक्तिगत घटक (खोला या बंद, टैब इंडेक्स, होवर, एनिमेशन, आदि) से संबंधित राज्य को घटक स्तर की स्थिति में रखा जाना चाहिए।

आप प्रारंभिक अवस्था निर्धारित करने के लिए निम्नलिखित का उपयोग कर सकते हैं:

constructor(props) {
super(props);
this.state = {
expanded: false
};
}

फिर एक ऑनक्लिक फ़ंक्शन बनाएं जो रिटर्न करता है this.setState({ expanded: true )};

यही कारण है कि मैं शायद इसे संभालूंगा।


जवाब के लिए 0 № 2

मैं # 2 भी कहूंगा, लेकिन मेरा एक सवाल है, कियायह बूलियन राज्य कहीं स्टोर होगा (स्थानीय भंडारण, ...)? तब यह वैश्विक स्थिति में होगा, क्योंकि इस भंडारण से आपका प्रारंभिक राज्य बूलियन सेट किया जाएगा