将操作和状态映射到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

从终极版表格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行动的创建者

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调用更改为使用​​3210函数，但具有相同的结果。当我通过抛出一个调试器来检查道具时，没有任何功能被映射到道具上。发生了什么？

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

Answer 1

6+版本引入了对reduxForm api如何工作的更改。

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

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

现在这是为我工作：而不是它采取的形式

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

相反，你应该，如果你想连接Redux的性能和操作使用了Redux connect功能是这样的。

Answer 2

我connect ING方式：

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