टेक्स्ट इनपुट बनाने का सबसे अच्छा तरीका रेडक्स

Question

मैंने प्रतिक्रिया-रेडक्स का उपयोग करके एक साधारण टेक्स्ट फ़ील्ड घटक बनाया है।

यह एक गूंगा घटक है, इसलिए इसे परिवर्तन भेजने के लिए कॉल बैक फ़ंक्शन प्राप्त होता है।

इसलिए प्रत्येक परिवर्तन पर यह स्थानीय स्थिति बदलता है और ब्लर पर कॉल कॉल फ़ंक्शन को कॉल करता है।

मुझे लगता है कि मैं इस तरह के एक साधारण काम के लिए बहुत कुछ कर रहा हूं, यह एक ओवरकिल की तरह दिखता है, क्या इसे लागू करने के लिए बेहतर/छोटा तरीका है?

export default class CreativeName extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      creativeName: props.creativeName 
     }; 
    } 

    componentWillReceiveProps(nextProps) { 
     this.setState({ 
      creativeName: nextProps.creativeName 
     }); 
    } 

    onBlur() { 
     this.props.updateDraft('creativeName', this.state.creativeName); 
    } 

    onChange(e) {`enter code here` 
     this.setState({creativeName: e.target.value}); 
    } 

    render() { 
     return (
      <Row> 
       <Col lg={12} className="row-margin"> 
        <ControlLabel>*Name</ControlLabel> 
        <div className="campaign-name"> 
         <FormControl value={this.state.creativeName} type="text" onChange={(e) => this.onChange(e)} 
            onBlur={(e) => this.onBlur(e)} className="campaign-name-text-field" /> 
        </div> 
       </Col> 
      </Row> 
     ); 
    } 
} 

Answer 1

मैं वास्तव में अनुशंसा करता हूं कि redux-form का उपयोग करें। वैश्विक स्थिति में redux-form स्टोर इनपुट मान। redux-from द्वारा आप प्रतिक्रिया घटकों के बहुत उपयोगी इनपुट टैग प्राप्त कर सकते हैं।

उदाहरण के लिए:

import React, { Component, PropTypes} from 'react'; 

export default class FormInputTextBox extends Component { 
    static PropTypes = { 
    field: PropTypes.object.isRequired, 
    placeholder: PropTypes.string, 
    disabled: PropTypes.bool 
    } 
    render() { 
    const {field, placeholder, disabled} = this.props; 
    return (
     <div> 
     <input 
      type="text" 
      {...field} 
      placeholder={placeholder} 
      disabled={disabled} 
     /> 
     </div> 
    ); 
    } 
} 

Answer 2

मैं connect सुविधा react-redux पैकेज द्वारा आपूर्ति का उपयोग करें। तो यह (सिंटेक्स ES6 है) कुछ इस तरह देखा मैं अपने कोड में पुनर्निर्मित होगा:

container.js

import {connect} from 'react-redux' 
import {presenter} from './presenter' 
import {actions} from '../../loader' 

const mapStateToProps = (state, props) =>({ 
    creativeName: props.creativeName 
}) 

const mapDispatchToProps = (dispatch) =>({ 
    updateDraft : (creativeName) => dispatch(actions.updateDraft('creativeName', creativeName)) 
}) 

const container = connect(mapStateToProps, mapDispatchToProps)(presenter) 

export { 
    container 
} 

actions ऊपर सिर्फ एक मानक redux कार्रवाई रचनाकारों युक्त फ़ाइल है।

presenter.js

function presenter ({creativeName}, updateDraft) { 

    const onBlur=e=>updateDraft(e.target.value) 

    return (
     <Row> 
      <Col lg={12} className="row-margin"> 
       <ControlLabel>*Name</ControlLabel> 
       <div className="campaign-name"> 
        <FormControl value={creativeName} type="text" onBlur={e=>onBlur(e)} className="campaign-name-text-field" /> 
       </div> 
      </Col> 
     </Row> 
    ) 
} 

export { 
    presenter 
} 

सच में मैं सब पर किसी भी स्थानीय राज्य का उपयोग नहीं किया जाएगा और इसके बजाय का उपयोग एक selector (reselect देखें) होगा वैश्विक राज्य के बाहर घटकों स्थानीय राज्य खींचने के लिए, एक इस तरह बिट:

presenter.js - mapStateToProps

import {actions, services} from '../../loader' 

const mapStateToProps = (state) =>({ 
    state: services.CreativeName.selector.getAll(state) 
}) 

यह निश्चित रूप से अलग-अलग चीजों को करने का तरीका है, मैं इसे पसंद करता हूं, लेकिन मुझे यकीन नहीं है कि यह कोई आसान है।