क्या यह Redux के बिना संभव है?

आज आप बहुत सारे स्थान पा सकते हैं जहां प्रतिक्रिया / रिडक्स की आवश्यकता होती है। प्रतिक्रिया महान है, कोई सवाल नहीं पूछा गया। Redux के लिए सवाल यह है कि क्या इसके बिना यह संभव है। यदि आप थोड़ा सा Google करते हैं, तो Habré पर एक ठोस लेख है , जहां लेखक एक ही सवाल पूछता है। एक सरल उदाहरण (टॉडलिस्ट) के साथ एक लेख में, इस .upateViews () विधि को अक्सर (सात से आठ बार) कहा जाता है और यह करना आसान लगता है।

यहां मुख्य विचार अवलोकनीय मॉडल है, प्रतिक्रिया योग्य है, अवलोकनीय है, केवल एक चीज है जो एक मॉडल बनाना है।

मॉडल बनाने से पहले, क्लाइंट के डिजाइन (वास्तुकला) के बारे में कुछ शब्द:

सूचकांक - कच्चा डेटा
इतिहास - सरणी [मॉडल]
पर्यवेक्षक - मॉडल
दृश्य - त्रुटियां, फोकस, झंडे

index.jsx - उपयोगकर्ता स्क्रीन के लिए प्रोग्राम एंट्री पॉइंट। अनुक्रमणिका डिफ़ॉल्ट डेटा के साथ सभी घटकों को प्रस्तुत करती है, अतुल्यकालिक प्रश्न बनाती है, नए डेटा के साथ घटकों को फिर से तैयार करती है।

// index.jsx <History> <Observer> <HeaderView /> <MainView /> </Observer> </History> 

कई विचारों के लिए मॉडल को सिंक्रनाइज़ करने के लिए Observer.jsx जिम्मेदार है। उदाहरण के लिए, पेट्या एक ऑफर फॉर्म भरता है और पेज हेडर में वास्तविक समय का पूर्वावलोकन देखता है। ऑब्ज़र्वर मॉडल ऑब्जेक्ट को संग्रहीत करता है, एपीआई प्रदान करता है: चाइल्ड घटकों को ऑनमॉडेलचेंज (क्षेत्र, मूल्य)।

History.jsx मॉडल ऑब्जेक्ट्स का एक ढेर है, जहां एपी: कमिट और रोलबैक।

Model.js वह है जो उपयोगकर्ता पेन से दर्ज कर सकता है - अर्थात, सबसे मूल्यवान। मॉडल में अन्य डेटा को संग्रहीत करने की आवश्यकता नहीं है। मॉडल एक प्रतिक्रिया घटक नहीं है, लेकिन एक नियमित जेएस वर्ग है।

 class Model { constructor(other = {}) {} // copy constructor (and default too) isEqual(other) {} // operator == less(other) {} // operator< swap(other) {} hash() {} fieldNameConstrains() {} //see below please } 

कॉपी कंस्ट्रक्टर को कम से कम इतिहास के लिए आवश्यक है। इस्क्वल विधि पॉपअप-अनसैलेड-चेंजेस के लिए है (जो राज्य में ध्वज की तुलना में बहुत अधिक सुविधाजनक है)। FieldNameConstrains विधि आश्रित क्षेत्रों के लिए है।

मोटे तौर पर, अगर आश्रित क्षेत्र हैं, तो उन्हें लगातार एक पंक्ति में बदलने की जरूरत है।

 class Model { // constrains // distance <== velocity * time velocityConstrains(newVelocity) { this.velocity = newVelocity; this.distance = this.velocity * this.time; } timeConstrains(newTime) { … } distanceConstrains(newDistance) { this.distance = newDistance; this.time = this.distance / this.velocity; } } 

व्यक्तिगत अनुभव से, model.field.onchange जैसी कोई चीज़ काम नहीं करती है, क्योंकि कभी-कभी आपको कॉपी कंस्ट्रक्टर को कॉल करने की आवश्यकता होती है और ऑन्चेंज घटनाओं की बिल्कुल भी आवश्यकता नहीं होती है।

View.jsx

 class View extends React.Component { state = { errors: {}, focus: {}, … } render() { … <input value={this.props.model.title} onChange={e => this.props.onModelChange('title', e.target.value)} /> … } } 

मान्यकरण। मॉडल में सत्यापन करने की आवश्यकता नहीं है। यह देखने में किया जाना चाहिए (यह मत भूलो कि दृश्य उपयोगकर्ता की स्क्रीन है और यह नहीं कि पूरे मॉडल को स्क्रीन पर दिखाया जा सकता है)। सत्यापनकर्ता विधेय का एक समूह हैं। सत्यापन के लिए केवल दो एल्गोरिदम हैं: 1) हम फॉर्म में सभी त्रुटियां पाते हैं या 2) हम पहली त्रुटि पाते हैं। उदाहरण के लिए

 class View extends React.Component { onClickSaveButton() { const mapper = { title: () => model.title.length && !maxLenValidator(model.title, 25), price: () => !(model.price % 40 == 0), url: () => !urlValidator(model.url), … } const errors = map(mapper, (validator, key) => { return validator() ? key : undefined; }).filter(Boolean); } //       

पहुँच अधिकार। यहां मुख्य बात यह है कि रहने और विरासत का उपयोग न करें। विचार यह है कि मॉडल में सभी फ़ील्ड शामिल हैं और हम भूमिकाओं के लिए फ़ील्ड ट्रिम करते हैं। यही है, यह एक श्वेतसूची है, मॉडल में शेष फ़ील्ड डिफ़ॉल्ट रूप से बने रहते हैं। सत्यापन के लिए एक कदम जोड़ा जाता है - हम सत्यापन ऑब्जेक्ट का प्रक्षेपण करते हैं (यह भी मैपर है, ऊपर देखें), अर्थात, हम केवल आवश्यक फ़ील्ड को मान्य करते हैं।

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

आइक्वल मॉडल विधि के बारे में। बर्तनों में कहीं.जैसे वहाँ isEqual और isEqualArray तरीके हैं:

  function isEqual(left, right) { return left.isEqual(right); } isEqualArray(v1, v2) { if (v1.length !== v2.length) { return false } for (var k = 0; k != v1.length; k++) { if (!isEqual(v1[k], v2[k])) { return false; } } return true; } 

आपको मॉडल को नेस्टेड नहीं बनाने की कोशिश करने की आवश्यकता है। मत भूलो कि मॉडल उपयोगकर्ता डेटा है, न कि डेटा संरचना।

संदर्भ:

→ टाइम्स
→ दो