如何在React JS中使用Redux和Axios？

Question

這是我的登錄頁面：

class Login extends Component { 

    /*define constructor for state props*/ 
    constructor() { 
    super(); 

    this.state = { 
     email: '', 
     password: '' 
    }; 
     this.handleSubmit = this.handleSubmit.bind(this); 
     this.handleChange = this.handleChange.bind(this); 
    } 

    /*Define the after submit form*/ 
    handleSubmit(e) { 
     // Stop browser from submitting the form. 
     e.preventDefault(); 

     this.form.validateFields(); 

      if (!this.form.isValid()) { 
      console.log("Not valid arguments"); 
      } else { 

    This is my function for Axios post values 
     Validate here or directly when setting state. 
     Then send a POST request to your endpoint. 

     axios.post('http//127.0.0.1:8000/user/login', { 
      email: this.state.email, 
      password: this.state.password 
     }) 
     .then(function(response) { 
      /*response from json*/ 
      console.log(response); 
     }) 
     .catch(function(error) { 
      console.log(error); 
     }); 
     } 
    } 

    handleChange(e) { 

     this.form.validateFields(e.currentTarget); 

     this.setState({ 
     [e.target.name]: e.target.value 
     }); 
    } 

    render() { 
    return(
     <div className="container"> 
     <h3 className="jumbotron">Redux Form Validation</h3> 
     <FormCode onSubmit={this.submit} /> 
    </div> 

這是使用終極版的表單

在前面定義的驗證我的驗證功能

const validate = values => { const errors = {} if (!values.password) { errors.password = 'Required' } else if (values.password.length > 15) { errors.password = 'Must be 15 characters or less' } if (!values.email) { errors.email = 'Required' } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,4}$/i.test(values.email)) { errors.email = 'Invalid email address' } return errors }

const renderField = ({ input, label, type, meta: { touched, error, warning } }) => (
    <div> 
     <label className="control-label">{label}</label> 
     <div> 
     <input {...input} placeholder={label} type={type} className="form-control" /> 
     {touched && ((error && <span className="text-danger">{error}</span>) || (warning && 

{warning}))} )

let FormCode = props => { 
    const { handleSubmit, pristine, submitting } = props; 
    return (
    <form onSubmit={ handleSubmit }> 
     <div className="form-group"> 
     <Field name="firstName" component={renderField} label="First Name" /> 
     </div> 
     <div className="form-group"> 
     <Field name="lastName" component={renderField} label="Last Name" /> 
     </div> 
     <div className="form-group"> 
     <Field name="email" component={renderField} label="Email" /> 
     </div> 
     <div className="form-group"> 
     <button type="submit" disabled={pristine || submitting} className="btn btn-primary">Submit</button> 
     </div> 
    </form> 
) 
} 
FormCode = reduxForm({ 
    form: 'contact', 
    validate, 
})(FormCode); 

export default FormCode; 

I'm收到此錯誤：

Uncaught Error: You must either pass handleSubmit() an onSubmit function or pass onSubmit as a prop

Answer 1

上述解決方案將工作。無論如何，我想離開你我的意見。

首先，您不應該混合使用setState和Redux。如果您要使用Redux，那麼更好地處理Redux上的所有應用程序狀態。

然後，在您的React組件中，您只能調用Redux的操作。假設您有一個名爲loginWithEmailAndPassword的操作。您提交功能會是這樣的：

handleSubmit(e) { 
    e.preventDefault(); 

    // There is not need to pass email and password since you have 
    // those values in "state". 
    this.props.loginWithEmailAndPassword(); 
} 

而且你的終極版動作會是這樣的：

export function loginWithEmailAndPassword() { 
    return (dispatch, getState) => { 
    // Get email and password from state. 

    return axios.post('YOUR_URL', { email, password }) 
     .then((success) => success && dispatch(someNextAction())); 
    }; 
} 

這是超級超級快寫的，所以我不知道它是否工作。這只是「僞代碼」，解釋了我將如何爲您的問題管理解決方案。

看看getFormValues還原形式（https://redux-form.com/6.1.0/docs/api/selectors.md）。

希望它有幫助。 乾杯。

Answer 2

試試這個：

onSubmit(values) { 
    // this === component 
    console.log(values); 
    } 

render() { 
    // this is a property that is being passed to your component 
    // on behalf of reduxForm 
    const {handleSubmit} = this.props 

    return (
     // handleSubmit takes a function that you define and you 
     // pass that to handleSubmit and it takes care of the 
     // reduxForm validation and if everything is good then it 
     // will call the callback this.onSubmit and passes the values 
     // out of the form to work with 
     // this.onSubmit is the callback function 
     <form onSubmit={handleSubmit(this.onSubmit.bind(this))}> 
     <Field 
      label="Title For Post" 
      name="title" 
      component={this.renderField} 
     /> 
     <Field 
      label="Categories" 
      name="categories" 
      component={this.renderField} 
     /> 
     <Field 
      label="Post Content" 
      name="content" 
      component={this.renderField} 
     /> 
     <button type="submit" className="btn btn-primary">Submit</button> 
     </form> 
    ); 
    }