एक्शन क्रिएटर "this.props" में रेडक्स-फॉर्म 6.0.0-rc.3

Question

के साथ नहीं दिख रहे हैं जब मैंने रेडक्स-फॉर्म 5.3.1 का उपयोग किया था, तो मैं अपने एक्शन क्रिएटर तक पहुंचने में सक्षम था। लेकिन जैसा कि मुझे सामग्री-यूआई की आवश्यकता थी, मैंने इसे 6.0.0-आरसी 3 में अपडेट किया।

5.3.1 से 6.0.0 में परिवर्तन: आदानों के नीचे से

const { handleSubmit, fields: { email, password, passwordConfirm }} = this.props;

• निकाला गया त्रुटियों सत्यापन:
  • हटाया प्रस्तुत करना (से क्षेत्रों)

  निर्यात डिफ़ॉल्ट से

  • हटाया क्षेत्रों सरणी:

  export default reduxForm({ form: 'signup', fields: ['email', 'password', 'passwordConfirm'], validate }, mapStateToProps, actions)(Signup);

  • सामग्री-UI घटक के लिए जोड़ा गया रैपर:

  import { renderTextField, renderCheckbox, renderSelectField, renderDatePicker } from '../material-ui-wrapper';

  कोड:

  1 - console.log (this.props) लॉग कोई कार्रवाई नहीं की निर्माता - लॉग इन करना चाहिए signupUser समारोह

  'use strict'; 
  import React, { Component } from 'react'; 
  import { reduxForm, Field } from 'redux-form'; 
  import * as actions from '../../actions'; 
  
  import { renderTextField } from '../material-ui-wrapper'; 
  
  import {Card, CardActions, CardHeader, CardText} from 'material-ui/Card'; 
  import FlatButton from 'material-ui/FlatButton'; 
  
  class Signup extends Component { 
      handleFormSubmit(formProps) { 
      console.log(this.props); 
      this.props.signupUser(formProps); 
      } 
  
      renderAlert() { 
      if (this.props.errorMessage) { 
       return (
       <div className="error"> 
        {this.props.errorMessage} 
       </div> 
      ); 
      } 
      } 
  
      render() { 
      const { handleSubmit, pristine, submitting } = this.props; 
      return (
       <form id="form" onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}> 
       <Card> 
        <CardHeader title="Cadastre-se"/> 
        <CardText> 
        <Field name="email" component={renderTextField} label={"Email"} fieldType="text"/> 
        <Field name="password" component={renderTextField} label={"Senha"} fieldType="password"/> 
        <Field name="passwordConfirm" component={renderTextField} label={"Confirmação de senha"} fieldType="password"/> 
        {this.renderAlert()} 
        </CardText> 
        <CardActions> 
        <FlatButton type="submit" label="Criar!"/> 
        </CardActions> 
       </Card> 
       </form> 
      ); 
      } 
  } 
  
  function validate(formProps) { 
      const errors = {}; 
  
      if (!formProps.email || !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(formProps.email)) { 
      errors.email = 'Por favor, informe um email válido'; 
      } 
  
      if (formProps.password !== formProps.passwordConfirm) { 
      errors.password = 'Senhas devem ser iguais.'; 
      } 
  
      if (!formProps.password) { 
      errors.password = 'Por favor, informe uma senha.'; 
      } 
  
      if (!formProps.passwordConfirm) { 
      errors.passwordConfirm = 'Por favor, confirme a sua senha.'; 
      } 
  
      return errors; 
  } 
  
  function mapStateToProps(state) { 
      return { errorMessage: state.auth.error }; 
  } 
  
  export default reduxForm({ 
      form: 'signup', 
      validate 
  }, mapStateToProps, actions)(Signup); 
  

  संपादित

  परिवर्तित:

  export default reduxForm({ form: 'signup', validate }, mapStateToProps, actions)(Signup);

  करने के लिए:

  Signup = reduxForm({ form: 'signup', validate })(Signup); export default Signup = connect(mapStateToProps, actions)(Signup);

  यह काम किया। क्या यह ठीक करने का सबसे सही तरीका है?

Answer 1

बजाय:

export default reduxForm({ 
    form: 'signup', 
    validate 
}, mapStateToProps, actions)(Signup); 

उपयोग:

Signup = reduxForm({ 
form: 'signup', 
validate})(Signup); 

export default Signup = connect(mapStateToProps, actions)(Signup); 

पुनश्च: एक काम हो सकता है आसपास

Answer 2

आप रचना का उपयोग कर सकते पालन की तरह

import { compose } from 'redux' 
.... 
export default compose(
    reduxForm({ 
     form: 'survey', 
    }), 
    connect(mapStateToProps, actions) 
)(Signup) 

Answer 3

उन मानों को अपने रेडक्स-फॉर्म-सजाए गए घटक में प्राप्त करने के लिए, आप को रेडक्स राज्य से कनेक्ट करने की आवश्यकता होगी() डेटा प्रारंभिक वैल्यूज़ प्रोप के लिए reducer डेटा से मानचित्र।

http://redux-form.com/6.0.0-alpha.4/examples/initializeFromState/

Answer 4

आप अपने मौजूदा रंगमंच की सामग्री के साथ विधि बाध्य करने के लिए निर्माता का उपयोग कर सकते हैं। आपको कार्यों और प्रारंभिक स्थिति को पारित करने की आवश्यकता नहीं है।

class Signup extends Component { 

    constructor(props) { 
    super(props); 
    this.handleSubmit = this.handleSubmit.bind(this) 
    } 

    handleSubmit(formProps) { 
    console.log(this.props); 
    this.props.signupUser(formProps); 
    } 
    render() { 

    const { handleSubmit, pristine, submitting } = this.props; 

    return (

    <form id="form" onSubmit={this.handleFormSubmit}> 
    <Card> 
     <CardHeader title="Cadastre-se"/> 
     <CardText> 
     <Field name="email" component={renderTextField} label={"Email"} fieldType="text"/> 
     <Field name="password" component={renderTextField} label={"Senha"} fieldType="password"/> 
     <Field name="passwordConfirm" component={renderTextField} label={"Confirmação de senha"} fieldType="password"/> 
     </CardText> 
     <CardActions> 
      <FlatButton type="submit" label="Criar!"/> 
     </CardActions> 
     </Card> 
    </form> 
    ); 
    } 
} 
} 
Signup = reduxForm({ 
form: 'signup', 
validate})(Signup); 

export default Signup = connect()(Signup);