Em uma forma reduxhandleSubmit , que faz uma chamada Ajax, algumas propriedades do estado Redux são necessárias no Ajax (por exemplo, ID do usuário).

Isso seria fácil se eu quisesse definirhandleSubmit no componente do formulário: basta chamarmapStateToProps para passar o que eu precisar e ler dethis.props no meuhandleSubmit.

No entanto, como um bom desenvolvedor do React-Redux, escrevocomponentes e recipientes de vista separada, para que meus componentes de visualização possam ser simples com pouco ou nenhum comportamento. Portanto, eu querodefinir handleSubmit no meu contêiner.

Novamente, simples - redux-form está configurado para fazer isso. Definir umonSubmit nomapDispatchToProps, e o formulário o chamará automaticamente.

Exceto, oh espera, emmapDispatchToProps não há como acessar o estado redux.

Ok, não há problema, vou passar os adereços de que precisohandleSubmit junto com os valores do formulário.

Hmm, espere, é impossível passar dados parahandleSubmit usando esse mecanismo! Você obtém um parâmetro,values, e não há como adicionar outro parâmetro.

Isso deixa as seguintes alternativas pouco atraentes (das quais posso verificar se 1 e 2 funcionam):

1 Defina um manipulador de envio no componente de formulário, e a partir daí chamo minha própria função de manipulador de envio personalizada transmitida a partir de mapDispatchToProps. Tudo bem, mas exige que meu componente conheça alguns adereços do estado redux que não são necessários para exibir o formulário. (Esse problema não é exclusivo do redux-form.)

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

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

Ou, mais concisamente, tudo isso pode ser combinado em uma função de seta:

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

Então, para tornar esse manipulador completamente independente, ele poderia passar o this.props inteiro de volta ao manipulador personalizado:

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

2 Definir onSubmit em mergeProps em vez de mapDispatchToProps, para que ele tenha acesso a stateProps.Dan Abramov recomenda não usar o mergeProps (por razões de desempenho), então isso parece subótimo.

  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 as propriedades do estado nos campos de formulário redux que não são mapeados para nenhum controle de entrada no componente de formulário. Isso garantirá que eles estejam acessíveis novalues parâmetro retornado parahandleSubmit. Isso parece uma espécie de hack.

Tem que haver uma maneira melhor!

Existe uma maneira melhor?