रिएक्ट पर पुन: उपयोग के रूप

नमस्ते!

हमारे पास बीसीएस में एक व्यवस्थापक पैनल और कई रूप हैं, लेकिन रिएक्ट समुदाय में आम तौर पर स्वीकृत विधि नहीं है - उन्हें पुन: उपयोग के लिए कैसे डिज़ाइन किया जाए। आधिकारिक फेसबुक गाइड के पास वास्तविक परिस्थितियों में फॉर्म के साथ काम करने के बारे में विस्तृत जानकारी नहीं है, जहां सत्यापन और पुन: उपयोग की आवश्यकता होती है। कोई व्यक्ति Redux-form, formik, final-form का उपयोग करता है, या अपना स्वयं का समाधान भी लिखता है।


इस लेख में हम रिएक्ट पर रूपों के साथ काम करने के विकल्पों में से एक को दिखाएंगे। हमारा स्टैक इस तरह होगा: रिएक्ट + फॉर्मिक + टाइपस्क्रिप्ट। हम दिखाएंगे:

• एक घटक को क्या करना चाहिए।
• प्रॉपर स्तर पर कॉन्फ़िगरेशन, फ़ील्ड और सत्यापन।
• कैसे एक फार्म पुन: प्रयोज्य बनाने के लिए।
• रेंडरर का अनुकूलन।
• हमारी विधि से असुविधाजनक है।

नए व्यवसाय कार्य के साथ, हमने सीखा कि हमें 15-20 समान रूप बनाने की आवश्यकता होगी, और काल्पनिक रूप से उनमें से और भी अधिक हो सकते हैं। हमारे पास कॉन्फ़िगरेशन पर एक डायनासोर फॉर्म था, जो `स्टोर` के डेटा के साथ काम करता था,` sagas` के माध्यम से अनुरोधों को सहेजने और निष्पादित करने के लिए कार्रवाई करता था। वह अद्भुत था, व्यापार मूल्य कर रहा था। लेकिन यह पहले से ही गैर-विस्तार योग्य और गैर-पुन: प्रयोज्य था, केवल खराब कोड और बैसाखी के अतिरिक्त।

कार्य यह है: फॉर्म को फिर से लिखना ताकि इसे असीमित संख्या में पुन: उपयोग किया जा सके। खैर, कार्यात्मक प्रोग्रामिंग को याद रखें, इसमें शुद्ध कार्य हैं जो बाहरी डेटा का उपयोग नहीं करते हैं, हमारे मामले में 'redux', केवल वे ही तर्क (प्रॉप्स) में भेजे जाते हैं।

और वही हुआ।

हमारे घटक का विचार यह है कि आप एक आवरण (कंटेनर) बनाते हैं और उसमें बाहरी दुनिया के साथ काम करने का तर्क (Redux स्टोर से डेटा प्राप्त करना और क्रियाएं भेजना) लिखते हैं। इसके लिए, कंटेनर घटक को कॉलबैक के माध्यम से कुछ जानकारी प्राप्त करने में सक्षम होना चाहिए। फार्म की पूरी सूची सहारा:

interface IFormProps { //          IsSubmitting?: boolean; //     submitText?: string; //    resetText?: string; //       (  ) validateOnChange?: boolean; //     blur'e  (  ) validateOnBlur?: boolean; // ,      . config: IFieldsFormMetaModel[]; //  . fields: FormFields; //    validationSchema: Yup.MidexSchema; //     onSubmit?: () => void; //     reset  onReset?: (e: React.MouseEvent<HTMLElement>) => void; //    onChangeField?: ( e: React.SyntaticEvent<HTMLInputElement, name: string; value: string ) => void; //      +    onChangeFields?: (values: FormFields, prop: { isValid }) => void; } 

फॉर्मिक का उपयोग करना

हम <Formik /> घटक का उपयोग करते हैं।

 render() { const { fields, validationSchema, validateOnBlur = true, validateOnChange = true, } = this.props; return ( <Formik initialValues={fields} render={this.renderForm} onSubmit={this.handleSubmitForm} validationSchema={validationSchema} validateOnBlur={validateOnBlur} validateOnChange={validateOnChange} validate={this.validateFormLevel} /> ); } 

`मान्य` फॉर्म के प्रोप में, हम` this.validateFormLevel` विधि को कहते हैं, जिसमें हम कंटेनर घटक को सभी परिवर्तित फ़ील्ड प्राप्त करने का मौका देते हैं और जाँच करते हैं कि क्या वे वैध हैं।

 private validateFormLevel = (values: FormFields) => { const { onChangeFields, validationSchema } = this.props; if (onChangeFields) { validationSchema .validate(values) .then(() => { onChangeFields(values, { isValid: true }); }) .catch(() => { onChangeFields(values, { isValid: false }); }); } } 

यहां हमें कंटेनर को यह स्पष्ट करने के लिए फिर से सत्यापन करना होगा कि क्या खेत वैध हैं। फॉर्म जमा करते समय, हम बस प्रोप को 'onSubmit` कहते हैं:

 private handleSubmitForm = (): void => { const { onSubmit } = this.props; if (onSubmit) { onSubmit(); } } 

सहारा के साथ 1-5 सब कुछ स्पष्ट होना चाहिए। चलिए 'config', 'फ़ील्ड्स' और 'validSchema' पर चलते हैं।

सहारा 'विन्यास'

 interface IFieldsFormMetaModel { /**   */ sectionName?: string; sectionDescription?: string; fieldsForm?: Array<{ /**    */ name?: string; //          prop 'fields' /**    checked */ checked?: boolean; /** enum,      */ type?: ElementTypes; /**    */ label?: string; /**    */ helperText?: string; /**      */ required?: boolean; /**      */ disabled?: boolean; /**  -    */ minLength?: number; /**            */ initialValue?: IInitialValue; /**      */ selectItems?: ISelectItems[]; //   select, dropdown   }>; } 

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

 export const config: IFieldsFormMetaModel[] = [ { sectionName: ' ', fieldsForm: [{ name: 'subject', label: '', type: ElementTypes.Text, }], }, { sectionName: '', sectionDescription: '  ', fieldsForm: [{ name: 'reminder', disabled: true, label: '', type: ElementTypes.CheckBox, checked: true, }], }, ]; 

व्यावसायिक डेटा के आधार पर, `नाम` कीज़ के लिए मान निर्धारित किए जाते हैं। फॉर्मिक के लिए मूल या परिवर्तित मूल्यों को प्रसारित करने के लिए समान मानों का उपयोग 'फ़ील्ड' कीज़ में किया जाता है।

ऊपर के उदाहरण के लिए, 'फ़ील्ड' इस तरह दिख सकते हैं:

 const fields: SomeBusinessApiFields = { subject: '  ', reminder: 'yes', } 

सत्यापन के लिए, हमें यूप स्कीमा को पास करना होगा। हम कंटेनर प्रॉप्स के साथ फॉर्म को फॉर्म देते हैं, बाहरी डेटा के साथ बातचीत का वर्णन करते हैं, उदाहरण के लिए, अनुरोध।

उदाहरण के लिए फॉर्म किसी भी तरह से योजना को प्रभावित नहीं कर सकता है:

 export const CreateClientSchema: ( props: CreateClientProps, ) => Yup.MixedSchema = (props: CreateClientProps) => Yup.object( { subject: Yup.string(), description: Yup.string(), date: dateSchema, address: addressSchema(props), }, ); 

रेंडर और फ़ील्ड ऑप्टिमाइज़ेशन

प्रतिपादन के लिए, हमने कुंजी द्वारा त्वरित खोज के लिए एक नक्शा बनाया। यह संक्षिप्त दिखता है और खोज `स्विच` से तेज़ है।

 fieldsMap: Record< ElementTypes, ( state: FormikFieldState, handlers: FormikHandlersState, field: IFieldsFormInfo, ) => JSX.Element > = { [ElementTypes.Text]: ( state: FormikFieldState, handlers: FormikHandlersState, field: IFieldsFormInfo ) => { const { values, errors, touched } = state; return ( <FormTextField key={field.name} element={field} handleChange={this.handleChangeField(handlers.setFieldValue, field.name)} handleBlur={handlers.handleBlur} value={values[field.name]} error={touched[field.name] && errors[field.name] || ''} /> ); }, [ElementTypes.TextSearch]: (...) => {...}, [ElementTypes.TextArea]: (...) => {...}, [ElementTypes.Date]: (...) => {...}, [ElementTypes.CheckBox]: (...) => {...}, [ElementTypes.RadioButton]: (...) => {...}, [ElementTypes.Select]: (...) => {...}, }; 

प्रत्येक घटक फ़ील्ड स्टेटफुल है। यह एक अलग फ़ाइल में स्थित है और `React.memo` में लिपटा है। अनावश्यक रेंडरर से बचने के लिए, सभी मूल्यों को सहारा के माध्यम से प्रेषित किया जाता है, `बच्चों` को दरकिनार करते हुए।

निष्कर्ष

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