React Form + React Redux;無法創建表單

Question

案例：試圖創建一個註冊表單，該表單從一個簡單的表單和接收用戶輸入值，該表單依賴於url。

FORM  +  URL    
| name |  
| mail |  /signup/empire => signUpInGroup(user, group) 
| xxx |   -------- 
| terms |    group 

方法

[1。動作]sign-up.js

export default function signUp(userFormValues) { 
    return (dispatch) => { 
    // everything works fine with userFormValues, later I'll try to add group 
    } 
} 

[2。形式]的形式被命名爲sign-up-form.js

function SignUp({handleSubmit}) { 
    return (
    <form onSubmit={handleSubmit}> 
    <Field ...> 
    ... 
    </form> 
) 
} 

const SignUpForm = reduxForm({ 
    form: 'signUp' 
}) 
export default SignUpForm 

[3。組件]

import { connect } from 'react-redux' 
import signUpInCompany from '....actions/sign-up' 
import SignUpForm from '......components/sign-up-form' 

function SignUp({signUp, group}) { 
    console.log(group) // FINE!!!!!! 
    return (
    <div> 
     <SignUpForm handleSubmit={signUp} /> 
    </div> 
) 
} 

const mapDispatchToProps = { 
    signUp 
} 

export default connect(null, mapDispatchToProps)(cssModules(SignUp, styles)) 

=======================

，直到我嘗試發送group的動作功能也能正常工作。我只想要在我的動作功能中玩userFormValues和group。

失敗試＃1

[綁定組到功能]

function SignUp({signUp, group}) { 
    console.log(group) // FINE!!!!!! 
    return (
    <div> 
     <SignUpForm handleSubmit={signUp.bind({ group })} /> 
    </div> 
) 
}  

export default function signUp(userFormValues) { 
    // expected this to be { group: 'empire' } but got undefined 
    return (dispatch) => { 
} 
} 

失敗嘗試＃2

[創建的範圍]

function SignUp({signUp, group}) { 
    console.log(group) // FINE!!!!!! 
    return (
    <div> 
     <SignUpForm handleSubmit={signUp(group)} /> 
    </div> 
) 
} 

export default function signUp(group) { 
    return (userFormValues) => { 
    // nothing works 
    return (dispatch) => { 
     // blah blah 
    } 
    } 
} 

失敗的嘗試＃3

[即時通話功能]

function SignUp({signUp, group}) { 
    console.log(group) // FINE!!!!!! 
    return (
    <div> 
     <SignUpForm handleSubmit={(val) => signUp(group)(val) } /> 
    </div> 
) 
} 

export default function signUp(group) { 
    return (userFormValues) => { 
    // nothing works 
     return (dispatch) => { 
     // blah blah 
     } 
    } 
} 

Answer 1

最後，KISS原則勝。只要使用Object.assign()

import { connect } from 'react-redux' 
import signUpInCompany from '....actions/sign-up' 
import SignUpForm from '......components/sign-up-form' 

function SignUp({signUp, group}) { 
    console.log(group) // FINE!!!!!! 
    return (
    <div> 
     <SignUpForm handleSubmit={(body) => signUp(Object.assign(body, {group}))} /> 
    </div> 
) 
} 

const mapDispatchToProps = { 
    signUp 
} 

export default connect(null, mapDispatchToProps)(cssModules(SignUp, styles))