Reactjs 将操作和状态映射到ReduxForm

我最近从Redux Form 5.3.1升级到Redux Form 6.2，但我无法在表单提交中发送我的自定义操作创建者；它显示为不是一个函数。然而，检查时，formProps是正确的，并且正确调用handleFormSubmit。只是它无法识别映射到属性的任何操作

更新

相当有信心，这是

reduxForm

调用api的变化

这可能是一个解决方案：

Redux表单6.2中的代码：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import * as actions from '../../actions';
import { Field, reduxForm } from 'redux-form';
import InputField from '../input-field/index.js';

class Signup extends Component {
  handleFormSubmit(formProps) {
    // PROBLEM -> Uncaught TypeError: this.props.signupUser is not a function
    this.props.signupUser(formProps);
  }

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

    return (
      <form onSubmit={ handleSubmit(this.handleFormSubmit.bind(this)) } >
        <Field name="username" type="text" component={ InputField } label="Username" />
        <Field name="email" type="email" component={ InputField } label="Email" />
        <Field name="password" type="password" component={ InputField } label="Password" />
        <Field name="password_confirmation" type="password" component={ InputField } label="Confirmation" />
        <div>
          <button type="submit" disabled={ submitting }>Submit</button>
        </div>
      </form>
    );
  }
}

function mapStateToProps({ auth }) {
  return { errorMessage: auth.errors };
}

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

以前的工作代码（5.3.1）：

类注册扩展组件{
handleFormSubmit（formProps）{
this.props.signupUser（formProps）；
}
render（）{
常数{
手推，
字段：{
电子邮件，
密码，
密码确认，
用户名，
}
}=这是道具；
返回(
用户名：
{username.com&&username.error&&{username.error}
电邮：
{email.touch&&email.error&&{email.error}
密码：
{password.toucted&&password.error&&{password.error}
确认密码：
{password\u confirmation.toucted&&password\u confirmation.error&&{password\u confirmation.error}
注册
);
}

正如您所看到的，除了错误处理之外，它们非常相似。显然，这是一个重大的版本更改，我只是不明白为什么操作创建者会未定义。我试图更改

connect

调用以使用

mapDispatchToProp

函数，但结果相同。当我通过抛出调试器检查道具时，没有所有的函数都映射到了道具。发生了什么

---

有没有一种方法可以捕获表单处理程序submit？我想不出在什么情况下您不想捕获表单submit。

6+版本对

reduxForm

api的工作方式进行了更改。而不是采用表单

export default reduxForm({
   form: 'name-of-form',
   fields: ['field1', 'field2'],
   // other configs
}, mapStateToProps, actions)(ComponentName);

相反，如果要连接redux属性和操作，则应该像这样使用redux

connect

函数：

const form = reduxForm({
  form: 'name-of-form',
  // other configs
});

export default connect(mapStateToProps, actions)(form(ComponentName));

---

这对我来说现在起作用了。

6+版本引入了对

reduxForm

api工作方式的更改。而不是采用

export default reduxForm({
   form: 'name-of-form',
   fields: ['field1', 'field2'],
   // other configs
}, mapStateToProps, actions)(ComponentName);

相反，如果要连接redux属性和操作，则应该像这样使用redux

connect

函数：

const form = reduxForm({
  form: 'name-of-form',
  // other configs
});

export default connect(mapStateToProps, actions)(form(ComponentName));

---

这对我现在起作用了。

我的连接方式：

 import { connect } from 'react-redux';

 class Signup extends Component {

     // ...

 }

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

 export default connect(
   ({ auth }) => ({
     errorMessage: auth.errors
   }),
   {
     ...actions
   }
 )(SignupForm);

---

我的连接方式是：

 import { connect } from 'react-redux';

 class Signup extends Component {

     // ...

 }

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

 export default connect(
   ({ auth }) => ({
     errorMessage: auth.errors
   }),
   {
     ...actions
   }
 )(SignupForm);

---

reduxForm（）

的API从5.x更改为6.x

通过使用，您可以准确地完成您现在正在做的事情：

import * as actions from '../../actions';

function mapStateToProps({ auth }) {
  return { errorMessage: auth.errors };
}

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

对于6.x，它们只允许您传入配置对象。但是，建议如下：

import * as actions from '../../actions';

function mapStateToProps({ auth }) {
  return { errorMessage: auth.errors };
}

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

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

---

reduxForm（）

的API从5.x更改为6.x

通过使用，您可以准确地完成您现在正在做的事情：

import * as actions from '../../actions';

function mapStateToProps({ auth }) {
  return { errorMessage: auth.errors };
}

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

对于6.x，它们只允许您传入配置对象。但是，建议如下：

import * as actions from '../../actions';

function mapStateToProps({ auth }) {
  return { errorMessage: auth.errors };
}

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

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