Сопоставление действий и состояние с ReduxForm

Question

Недавно я обновился от Redux Form 5.3.1 до Redux Form 6.2, и я не смог отправить своего создателя пользовательских действий в форму submit; он отображается как не функция. Тем не менее, formProps корректны при проверке, и handleFormSubmit вызывается правильно. Просто он не распознает какие-либо действия, сопоставленные свойствам.

Update

довольно уверенно, это изменение в апи из reduxForm вызова. 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 действие создатель

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, но имел тот же результат. Когда я проверяю реквизит, бросая отладчик, ни одна из функций не отображается на реквизиты. Что случилось?

Есть ли способ захватить форму отправителя? Я не могу представить себе ситуацию, когда вы не захотите захватить форму submit.

Answer 1

В версии 6+ появилась информация о том, как работает api reduxForm. Вместо того, чтобы она принимая форму

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

Вместо этого, вы должны использовать функцию перевождь connect как это, если вы хотите подключить свойства и действия Redux:

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

API-интерфейс для reduxForm() изменился с 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);