प्रतिक्रिया में क्वेरी पैराम से निपटने के लिए कैसे करें + प्रतिक्रिया-राउटर + प्रवाह

Question

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

एक /users पृष्ठ है जो उपयोगकर्ताओं को सूचीबद्ध करता है और आप उपयोगकर्ताओं को खोज बार के माध्यम से फ़िल्टर कर सकते हैं। इसलिए यदि आप उन उपयोगकर्ताओं को फ़िल्टर करना चाहते हैं जिनमें उनके उपयोगकर्ता नाम में 'जो' है, तो मैं सर्वर पर अनुरोध करता हूं कि क्वेरी पैराम जैसे /users?username=joe। इसके अलावा मैं page पैरामीटर जोड़कर भी अंकन कर सकता हूं, (/users?username=joe&page=1)।

यदि मैं केवल कार्यक्षमता के बारे में सोचना, प्रवाह शायद

1. ग्राहक इनपुट तत्व को joe सम्मिलित करता है और क्लिक करता है खोजें होगा।
2. पर क्लिक करना बटन Action (जैसे action.getUser) को सक्रिय करता है।
3. Action सर्वर से अनुरोध करता है और परिणाम
4. Dispatcher जिसे (आमतौर पर Store) Action में रुचि रखता है के लिए परिणाम पेलोड के साथ एक समारोह डिस्पैच प्राप्त करता है।
5. Store रों परिवर्तन का नया परिणाम के साथ राज्य में परिवर्तन Action
6. देखें (Component) Store सुनकर फिर से renders द्वारा प्राप्त '।

और यह अपेक्षा के अनुसार काम करता है। हालांकि, मैं चाहता हूं कि क्लाइंट वर्तमान फ़िल्टर किए गए परिणाम को बुकमार्क करने में सक्षम हो और कुछ समय बाद उसी पृष्ठ पर वापस आ सकें। इसका मतलब है कि क्लाइंट द्वारा किए गए खोज शब्द के बारे में स्पष्ट जानकारी सहेजने के लिए मुझे कहीं और आवश्यकता होगी, जो आम तौर पर यूआरएल (क्या मैं सही हूँ?) है। इसलिए मुझे खोज शब्द (/users?username=joe&page=1) को सहेजने के लिए क्वेरी पैरामीटर के साथ यूआरएल अपडेट करना होगा।

मुझे क्या उलझन में है यूआरएल कहां और कब अपडेट करना है? मैं अभी क्या कर सकता हूं नीचे 2 विकल्प हैं - और वे बिल्कुल साफ नहीं लगते हैं।

विकल्प 1

1. ग्राहक इनपुट तत्व को joe सम्मिलित करता है और क्लिक करता है खोजें।
2. पर क्लिक करना बटन नए क्वेरी पैराम्स (/users?username=joe&page=1) के साथ ReactRouter के संक्रमण को सक्रिय करता है।
3. व्यू (Component) this.props.params और this.props.query के माध्यम से नए पैरा प्राप्त करता है।
4. व्यू (Component) Action जैसे Action.getUser को प्राप्त क्वेरी पैराम के आधार पर आग लगती है - इस मामले में username=joe&page=1।

इस के बाद, यह ऊपर

विकल्प 2 रूप में ही है

1. ग्राहक इनपुट तत्व और क्लिक दिखाई दे joe सम्मिलित करता है (केवल 6 क्या मैं ऊपर बताया गया है से अलग है) खोज।
2. पर क्लिक करना बटन Action (जैसे action.getUser) को सक्रिय करता है।
3. Action सर्वर से अनुरोध करता है और परिणाम
4. Dispatcher जिसे (आमतौर पर Store) Action में रुचि रखता है के लिए परिणाम पेलोड के साथ एक समारोह डिस्पैच प्राप्त करता है।
5. Store रों परिवर्तन का नया परिणाम के साथ राज्य में परिवर्तन Action
6. देखें (Component) Store सुनकर फिर से renders द्वारा प्राप्त '। और किसी भी तरह अपडेट हो जाता है अपने यूआरएल के आधार पर (मैं कैसे, अभी तक पता नहीं है) अपने props (जैसे this.props.searchusername, और this.props.searchpage)

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

कुछ लेख मैं

• Any way to get current params or current query from router (outside of component)?
• Async data and Flux stores
• Make it easier to add query parameters
• React Router and Arbitrary Query Params: Page Refreshes Unintentionally on Load?
• Add default params?

पढ़ा है 0

Answer 1

पूरी तरह सुनिश्चित नहीं हैं कि आप द्वारा

क्या मतलब है इस मैं जानकारी को बचाने के लिए यूआरएल को अपडेट करने की आवश्यकता होगी इसका मतलब है (/ उपयोगकर्ताओं? उपयोगकर्ता नाम = जो & पेज = 1)।

आपके पास शायद इसी तरह की संरचना होगी।

TopContainer.jsx - Users.jsx -

आमतौर पर TopContainer सभी दुकानों देखेंगे और अगर कुछ बदल गया है, यह users.jsx करने के लिए नीचे पारित User.jsx

की एक सूची। इस तरह User.jsx में, आप किसी भी पुनर्वितरण के बारे में चिंता किए बिना बस.props.users प्रस्तुत कर सकते हैं।

खोज उपयोगकर्ता क्रियाएं आमतौर पर टॉपकॉन्टेनर के घटकविल्लमाउंट ईवेंट में होती हैं, और आप पृष्ठ उपयोगकर्तास्टोर को सुनेंगे। किसी भी प्रश्न पैरा में फेंकने के लिए यह एक अच्छी जगह है।कुछ इस तरह काम करेगा

componentWillUnmount() { 
    let searchTerm = router.getCurrentQuery().searchTerm; 
    UserActions.searchUsers(searchTerm) 
    }, 

पेज वास्तव में परवाह नहीं करता है, तो यूआरएल एक क्वेरी पैरामीटर है या नहीं, यह सिर्फ dumbly से पता चलता उपयोगकर्ता की दुकान में जो कुछ भी।

फिर जब खोज पूर्ण होने पर, Users.jsx पुनः लोड किया जाएगा और दिखाने के सही परिणाम

Answer 2

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

कुछ इस तरह:

let myQuery = this.props.location.query; 
if (myQuery.username) { 
    let theUser = myQuery.username; 
    this.setState({ 
    userName = myQuery.username 
    }); 
} else { 
    this.setState({ 
    userName = false //Show All 
    }); 
} 

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

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