将动作和状态映射到 ReduxForm

Question

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

更新

相当有把握，就是reduxForm调用的api发生了变化。 https://github.com/erikras/redux-form/issues/2013

这可能是一个解决方案：

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

来自 Redux Form 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);

注册用户操作创建者

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

connecting 我的方式：

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