將操作和狀態映射到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);