Question

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

更新

相当自信，这是reduxForm电话的api的变化。 https://github.com/erikras/redux-form/issues/2013

这可能是一个解决方案：

https://gist.github.com/insin/bbf116e8ea10ef38447b

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);

signupUser action creator

export function signupUser(props) {
  return dispatch => {
    axios.post(`${apiRoot}users`, { user: { ...props } })
        .then(response => {
          const { status, errors, access_token, username } = response.data;

          if (status === 'created') {
             // handler
          }
          else {
            dispatch(authError(errors));
          }
        })
        .catch(err => dispatch(authError(err.message)));
  }
}

以前的工作代码（5.3.1）：

class Signup extends Component {
  handleFormSubmit(formProps) {
    this.props.signupUser(formProps);
  }

  render() {
    const {
      handleSubmit,
      fields: {
        email,
        password,
        password_confirmation,
        username,
      }
    } = this.props;

    return (
        <form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}>
          <fieldset className="form-group">
            <label>Username:</label>
            <input className="form-control" {...username} />
            {username.touched && username.error && <div className="error">{username.error}</div>}
          </fieldset>
          <fieldset className="form-group">
            <label>Email:</label>
            <input className="form-control" {...email} />
            {email.touched && email.error && <div className="error">{email.error}</div>}
          </fieldset>
          <fieldset className="form-group">
            <label>Password:</label>
            <input type="password" className="form-control" {...password} />
            {password.touched && password.error && <div className="error">{password.error}</div>}
          </fieldset>
          <fieldset className="form-group">
            <label>Confirm Password:</label>
            <input type="password" className="form-control" {...password_confirmation} />
            {password_confirmation.touched && password_confirmation.error && <div className="error">{password_confirmation.error}</div>}
          </fieldset>
          <button action="submit">Sign up</button>
        </form>
    );
}

正如您所看到的，除了错误处理之外，它们非常相似。显然，这是一个重大的版本更改，我只是没有看到为什么动作创建者将被定义。我尝试更改connect调用以使用mapDispatchToProp函数，但结果相同。当我通过抛出调试器来检查道具时，没有任何函数被映射到道具。发生了什么事？

有没有办法捕获表单处理程序提交？我无法想到你不想捕获表单提交的情况。

Answer 1

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));

这对我现在很有用。

Answer 2

connect的方式：

 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);

Answer 3

reduxForm()的API从5.x更改为6.x.

使用5.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，他们只允许您传入配置对象。但是，official redux-form documentation for 6.2.0 (see bottom of page)建议如下：

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

3 个答案: