Redux नेस्टेड reducers या राज्य सामान्यीकृत?

Question

मैं प्रतिक्रिया के साथ एक फॉर्म घटक बना रहा हूं, और रेडक्स के साथ फॉर्म (ओं) और फ़ील्ड (ओं) राज्य को स्टोर करना चाहता हूं।

तो मेरे पास एक फॉर्म रेड्यूसर और फॉर्मफिल्ड रेड्यूसर है।

मैंने पहली बार अपनी आंत महसूस करने का पालन किया और फ़ॉर्म रेड्यूसर में फॉर्म फ़ील्ड रेड्यूसर को घोंसले की कोशिश की। इसका मूल रूप से फॉर्म फ़ील्ड से संबंधित स्विच केस दोनों फॉर्म रेड्यूसर और फॉर्म फ़ील्ड रेड्यूसर में थे।

यह थोड़ा गन्दा (दोहराव कोड) महसूस किया, इसलिए मैंने प्रलेखन में और अधिक पढ़ा, और पाया कि राज्य को सामान्य करने की सिफारिश की जाती है। तो मैंने नेस्टेड फॉर्म फ़ील्ड को हटा दिया और उन्हें फॉर्म के समान स्तर पर रखा।

इससे reducer अच्छा और साफ हो गया, लेकिन अब एक विशिष्ट रूप के लिए फॉर्म फ़ील्ड को पुनर्प्राप्त करना भयानक लगता है। मैं मूल रूप से सभी फॉर्म फ़ील्ड के माध्यम से लूपिंग कर रहा हूं और केवल सही "formId" पैरामीटर के साथ उन्हें वापस कर रहा हूं।

रेडक्स दस्तावेज कहता है कि आपको राज्य को सामान्यीकृत डेटाबेस के रूप में देखना चाहिए, लेकिन क्या वह नहीं भूल गया कि आपके पास परिणामों के लिए पूछने में सक्षम होने की लक्जरी नहीं है?

क्या मुझे यहां कुछ याद आया? इसे हल करने के लिए अनुशंसित तरीका क्या है?

Answer 1

ऐसा लगता है कि आप एक सरणी के रूप में formFields राज्य रखना लेकिन formId जा रहा है के साथ एक वस्तु के रूप में यह क्वेरी करना चाहते हैं कुंजी:

यह कम करने अच्छे और साफ है, लेकिन अब एक विशिष्ट के लिए formFields पुन: प्राप्त करने बना फॉर्म भयानक लगता है। मैं मूल रूप से सभी फॉर्म फ़ील्ड के माध्यम से लूपिंग कर रहा हूं और केवल सही "formId" पैरामीटर के साथ उन्हें वापस कर रहा हूं। formFields[fieldId]:

आप formFields राज्य बदलते हैं तो एक ऑब्जेक्ट होना चाहिए, यह बहुत क्वेरी करने के लिए आसान हो जाएगा।

जैसा कि दूसरे उत्तर में बताया गया है, आप कंपोज़ेबल "चयनकर्ता" लिखने के लिए उपयोग कर सकते हैं जो compute derived state को परिभाषित करते हैं। फिर आपके घटकों का कोड सरल होगा क्योंकि डेटा तैयार करने की सभी भारी उठाने छोटे और संगत चयनकर्ताओं में हैंडल करती है।

आप shopping-cart उदाहरण में रेड्यूसर और चयनकर्ताओं को देख सकते हैं ताकि यह पता चल सके कि राज्य को बेवकूफ रेडक्स ऐप्स में कैसे संरचित किया गया है। ध्यान दें कि यह उदाहरण चयनकर्ताओं के लिए वेनिला फ़ंक्शंस का उपयोग करता है लेकिन हम बेहतर प्रदर्शन के लिए Reselect का उपयोग करने की सलाह देते हैं।

Answer 2

जो मैं आपकी समस्या को समझता हूं उससे व्युत्पन्न डेटा पूछताछ के बारे में है। (यानी फ़ील्ड जो एक्स फॉर्म से संबंधित हैं)।

reselect नामक एक उपयोगिता उपकरण भी है, आपका उपयोग-मामला यह हल करने के साथ उपयुक्त लगता है।

आपको केवल एक चयनकर्ता लिखने की आवश्यकता होगी जो formId की अपेक्षा करता है और यह फ़ॉर्म फ़ील्ड की एक सरणी वापस कर देगा।