如何在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>

这是我使用redux-forms进行Validations的函数

在前面定义验证

const validate = values => {const errors = {} if（！values.password）{errors.password ='Required'} else if（values.password.length> 15）{errors.password ='必须是15个字符或者less'} if（！values.email）{errors.email ='Required'} else if（！/ ^ [A-Z0-9 ._％+ - ] + @ [A-Z0-9 .-] +。 [AZ] {2,4} $ / i.test（values.email））{errors.email ='无效的电子邮件地址'}返回错误}

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 &&

{警告}））} ）

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;

我收到此错误：

未捕获错误：您必须将handleSubmit（）传递给onSubmit函数或传递onSubmit作为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();
}

你的Redux行动将是这样的：

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

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

这是超级快写，所以我不确定它是否有效。这只是“伪代码”，解释了我如何为您的问题管理解决方案。

看一看redux-form（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>
    );
  }