En forma reduxhandleSubmit Para realizar una llamada Ajax, se necesitan algunas propiedades del estado Redux en Ajax (por ejemplo, ID de usuario).

Esto sería bastante fácil si quisiera definirhandleSubmit en el componente del formulario: solo llamemapStateToProps para pasar lo que necesito y leerlo dethis.props en mihandleSubmit.

Sin embargo, como un buen desarrollador de React-Redux, escribovista separada de componentes y contenedores, por lo que mis componentes de vista pueden ser simples con poco o ningún comportamiento. Por eso quierodefinir handleSubmit en mi contenedor.

De nuevo, simple: redux-form está configurado para hacer eso. Definir unonSubmit enmapDispatchToProps, y el formulario lo llamará automáticamente.

Excepto, oh espera, enmapDispatchToProps no hay forma de acceder al estado redux.

Bien, no hay problema, solo pasaré los accesorios que necesitohandleSubmit junto con los valores del formulario.

Hmm, espera, es imposible pasar ningún dato ahandleSubmit utilizando este mecanismo! Obtienes un parámetro,values, y no hay forma de agregar otro parámetro.

Esto deja las siguientes alternativas poco atractivas (de las cuales puedo verificar que 1 y 2 funcionan):

1 Defina un controlador de envío en el componente de formulario, y desde allí llamar a mi propia función de controlador de envío personalizada que se transfirió desde mapDispatchToProps. Esto está bien, pero requiere que mi componente conozca algunos accesorios del estado redux que no se requieren para mostrar el formulario. (Este problema no es exclusivo de redux-form).

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

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

O, de manera más concisa, todo esto se puede combinar en una función de flecha:

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

Luego, para hacer que este controlador sea completamente agnóstico, podría pasar todo this.props nuevamente al controlador personalizado:

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

2 Definir onSubmit en mergeProps en lugar de mapDispatchToProps, por lo que tiene acceso a stateProps.Dan Abramov recomienda no usar mergeProps (por razones de rendimiento), entonces esto parece subóptimo.

  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 Copie las propiedades de estado en campos de forma redux que no están asignados a ningún control de entrada en el componente de formulario. Esto asegurará que sean accesibles en elvalues parámetro devuelto ahandleSubmit. Esto parece una especie de truco.

Tiene que haber una mejor manera!

¿Hay una mejor manera?