Reagieren Form + Redux reagieren; nicht in der Lage Formular zu erstellen

Fall : Der Versuch , ein Anmeldeformular zu erstellen , die die Benutzereingabewerte aus einer einfachen Form erhält und ein zusätzliches Feld , das auf der URL dependes.

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

Ansatz

[1. Aktion] sign-up.js

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

[2. Form] Das Formular wird genannt alssign-up-form.js

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

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

[3. Komponente]

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

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

Das funktioniert gut , bis ich versuche , senden groupan die Action - Funktion. Alles , was ich möchte in der Lage sein zu spielen userFormValues und group in meiner Action - Funktion.

Fehlgeschlagen Versuch # 1

[Gruppe binden an die Funktion]

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) => {
 }
}

Fehlgeschlagen Versuch # 2

[Neuer Umfang]

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
     }
   }
}

Fehlgeschlagen Versuch # 3

[Sofortige Anruffunktion]

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
      }
   }
}