Redux-form handleSubmit: How to access store state?

After spending time refining this question, option #1 is actually pretty good, in the final iteration (arrow function that passes all props back to the custom handler). It allows the component to be stateless and completely ignorant of any state that it doesn't consume. So I'm going to call that a reasonable answer. I would love to hear your better solutions!

Define a submit handler using an arrow function in the form component, and from there call my own custom submit handler function passed in from mapDispatchToProps.

<form onSubmit={ handleSubmit((values)=>{mySubmitHandler(values, this.props.user);}

Then to make this handler completely agnostic, pass the entire this.props back to the custom handler:

<form onSubmit={ handleSubmit((values)=>{mySubmitHandler(values, this.props);}

If the Submit function only needs the values and the props that weren't part of the form, we can pass back just those props which the form doesn't use. In a stateless component, this might look like:

const Thing_Create = ({ fields: {name, description},     error,     handleSubmit,     mySubmitHandler,     submitting,     onCancel,     ...otherprops}) => {return (<div>  <form onSubmit={ handleSubmit((values)=>{    mySubmitHandler(values, otherprops);}) }>[rest of form definition would go here]

The best way I found is pretty similar to the first solution you came up with.

Take advantage of the fact that the handleSubmit prop passed by redux-form can take a function that will be used as the onSubmit prop, and use partial application to pass any other parameters you need to onSubmit.

Action creator:

function updateUser(id, { name, lastname }) { ... }

Suppose the component gets an onUpdateUser property that just passes the parameters straight to the action creator. And the component also gets user, an object with the id property that we want to pass to the action creator along with the values in the fields.

Component

<form onSubmit={this.props.handleSubmit(this.props.onUpdateUser.bind(null, this.props.user.id))}>

This can easily be re-written for stateless functional components, can work for any amount of parameters as long as you place them on the left in the action creator, and it doesn't need any heavy lifting, just bind

I was able to solve this issue by binding this.

Somewhere in render()

<MyCustomFormComponent onSubmit={handleSubmit.bind(this)}/>

The handleSumit

  handleSubmit(fields) {    this.props.onSubmit(fields); //this is properly bound, HURRAY :-)  }

MapDispatchToProps for good developers :-)

const mapDispatchToProps = dispatch => ({  onSubmit: (fields) =>    dispatch({type: auth.actionTypes.LOGIN, payload: auth.api.login(fields)})});