reactjs - Redux-form handleSubmit: How to access store state?

Question

In a redux-form handleSubmit function, which makes an Ajax call, some properties from the Redux state are needed in the Ajax (e.g. user ID).

This would be easy enough if I wanted to define handleSubmit in the form's component: Just call mapStateToProps to pass in whatever I need, and read it from this.props in my handleSubmit.

However, like a good React-Redux developer I write separate view components and containers, so my view components can be simple with little or no behavior. Therefore, I want to define handleSubmit in my container.

Again, simple - redux-form is set up to do that. Define an onSubmit in mapDispatchToProps, and the form will call it automatically.

Except, oh wait, in mapDispatchToProps there's no way to access redux state.

Okay, no problem, I'll just pass the props I need into handleSubmit along with the form values.

Hmm, wait, it is impossible to pass any data into handleSubmit using this mechanism! You get one parameter, values, and there's no way to add another parameter.

This leaves the following unattractive alternatives (of which I can verify that 1 and 2 work):

1 Define a submit handler in the form component, and from there call my own custom submit handler function passed in from mapDispatchToProps. This is okay, but requires my component to know some props from the redux state that aren't required to display the form. (This issue is not unique to redux-form.)

dumbSubmit(values)
{
  const { mySubmitHandler, user} = this.props;
  mySubmitHandler(values, user);
}

<form onSubmit={ handleSubmit(this.dumbSubmit.bind(this)) }>

Or, more concisely, this can all be combined into an arrow function:

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

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

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

2 Define onSubmit in mergeProps instead of mapDispatchToProps, so it has access to stateProps. Dan Abramov recommends against using mergeProps (for performance reasons), so this seems suboptimal.

  function mergeProps(stateProps, dispatchProps, ownProps) {
  const { user } = stateProps.authReducer;
  const { dispatch } = dispatchProps;
  return {
    ...ownProps,
    ...dispatchProps,
    ...stateProps,
     onSubmit: (values) => {
       const { name, description } = values;
       const thing = new Thing(name, description, []);
       dispatch(createNewThing(thing, user.id));
     }
  }

3 Copy the state properties into redux-form fields which are not mapped to any input controls in the form component. This will ensure they are accessible in the values parameter passed back to handleSubmit. This seems like kind of a hack.

There's got to be a better way!

Is there a better way?

Answer 1

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]