रेडक्स-फॉर्म का उपयोग करने का प्रयास कर रहा है चयनकर्ता

Question

मेरे पास निम्न रेडक्स-फॉर्म घटक है, और मैं सबमिट बटन को अक्षम करने के लिए isSubmitting चयनकर्ता का उपयोग करना चाहता हूं। हालांकि, यह कभी सच लौटाता है जब प्रपत्र

प्रस्तुत करने है मेरे mapStateToProps समारोह:

const mapStateToProps = (state, props) => { 
    const firstTemplate = _.first(props.templates.toList().toJS()); 
    const course = props.courses.getIn([0, 'id']); 
    let values = { submitting: isSubmitting('CreateNewAssignmentForm')(state) }; 
    if (firstTemplate === undefined) { 
    return values; 
    } 

    if (firstTemplate) { 
    values = { 
     course, 
     template: firstTemplate, 
     submitting: isSubmitting('CreateNewAssignmentForm')(state), 
     initialValues: { 
     template: firstTemplate.id, 
     wordCount: firstTemplate.essay_wordcount, 
     timezone: momentTimezone.tz.guess(), 
     label: 'TRANSPARENT', 
     }, 
    }; 
    } 

    return values; 
}; 

export default connect(mapStateToProps)(
    reduxForm({ 
    form: 'CreateNewAssignmentForm', 
    destroyOnUnmount: false, 
    shouldAsyncValidate, 
    shouldValidate, 
    })(CreateNewAssignmentForm), 
); 

मेरी render() समारोह का आंशिक टुकड़ा:

render() { 
    const { handleSubmit, templates, courses, submitting } = this.props; 

    return (
     <StandardModalComponent 
     id="AssignmentModal" 
     title="Create Essay Draft" 
     primaryAction={['Submit', handleSubmit, { disabled: submitting }]} 
     width={800} 
     > 

मैं सही ढंग से चयनकर्ता का उपयोग है?

Answer 1

reduxForm के साथ isSubmitting चयनकर्ता का उपयोग करने की बिल्कुल आवश्यकता नहीं है। reduxForm यह submitting प्रोप पर होगा जो फ़ॉर्म सबमिट कर रहा है या नहीं, यह जांचने के लिए किया जा सकता है। लेकिन रेडक्स-फॉर्म को यह जानना आवश्यक है कि यह कब सबमिट हो रहा है। यदि आपका onSubmit किसी वादे के अलावा कोई मान देता है, तो submitting प्रोप हमेशा false होगा, रेडक्स-फॉर्म में सबमिट करने के लिए बस कोई तरीका नहीं है कि सबमिट कब समाप्त हो गया है, लेकिन यदि onSubmit एक वादा वापस करता है (जैसे @ सरेराग एआर सुझाया गया है) तो यह वचन को हल या अस्वीकार किए जाने तक submitting सत्य तक पहुंच जाएगा।

यानी, नोट करने के लिए कुछ और ही है: यदि आप अपने mapStateToProps अंदर isSubmitting चयनकर्ता निर्माता का उपयोग कर रहे हैं, यह वास्तव में बुरा है। यह प्रत्येक पुनर्वितरण के लिए एक चयनकर्ता बना देगा। ऐसा करने का एक सही तरीका createMapStateToProps फ़ंक्शन का उपयोग करना है।

const createMapStateToProps =()=> { 
    const isSubmittingSelector = isSubmitting('CreateNewAssignmentForm'); 

    return (state, props) => { 
    const firstTemplate = _.first(props.templates.toList().toJS()); 
    const course = props.courses.getIn([0, 'id']); 
    let values = { submitting: isSubmittingSelector(state) }; 
    if (firstTemplate === undefined) { 
     return values; 
    } 

    if (firstTemplate) { 
     values = { 
     course, 
     template: firstTemplate, 
     submitting: isSubmittingSelector(state), 
     initialValues: { 
      template: firstTemplate.id, 
      wordCount: firstTemplate.essay_wordcount, 
      timezone: momentTimezone.tz.guess(), 
      label: 'TRANSPARENT', 
     }, 
     }; 
    } 

    return values; 
    } 
} 

export default connect(createMapStateToProps())(
    reduxForm({ 
    form: 'CreateNewAssignmentForm', 
    destroyOnUnmount: false, 
    shouldAsyncValidate, 
    shouldValidate, 
    })(CreateNewAssignmentForm), 
);