Redux形式的handleSubmit：如何访问存储状态？

Question

在进行handleSubmitAjax调用的redux-form 函数中，Ajax中需要Redux状态的某些属性（例如，用户ID）。

这将是很容易的，如果我想定义handleSubmit形式的成分，只要调用：mapStateToProps在任何我需要传递，并从阅读this.props中我的handleSubmit。

但是，像一个出色的React-Redux开发人员一样，我编写了 单独的视图组件和容器 ，因此视图组件可以很简单，几乎没有行为。因此，我想
在我的container中定义handleSubmit 。

同样，设置简单-redux-form来做到这一点。定义一个onSubmit在mapDispatchToProps和形式会自动调用它。

除非等等，mapDispatchToProps否则无法访问redux状态。

好的，没问题，我将需要的道具handleSubmit和表单值一起传递给我。

嗯，等等，handleSubmit使用这种机制不可能传递任何数据！您将获得一个参数，values而无法添加另一个参数。

这留下了以下没有吸引力的选择（我可以验证其中的1和2是否有效）：

1 在表单组件中定义一个提交处理程序，
然后调用从mapDispatchToProps传入的我自己的自定义提交处理程序函数。没关系，但是需要我的组件从redux状态知道一些不需要显示表单的道具。（此问题并非redux-
form所独有。）

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

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

或者，更简洁地说，这些都可以组合成箭头函数：

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

然后，要使该处理程序完全不可知，可以将整个this.props传递回自定义处理程序：

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

2 在mergeProps中 而不是mapDispatchToProps中 定义onSubmit
，因此它可以访问stateProps。Dan
Abramov建议不要使用mergeProps（出于性能原因），因此这似乎不是最佳选择。

  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 将状态属性复制到redux-form字段中 ，该 字段
未映射到表单组件中的任何输入控件。这将确保可以在values传递回的参数中访问它们handleSubmit。这似乎是一种hack。

一定有更好的方法！

有没有更好的办法？

Answer 1

在花时间完善了这个问题之后，选项＃1 在最终迭代中 实际上是相当不错的
（将所有prop传递回自定义处理程序的箭头函数）。它允许组件为无状态的，并且完全不了解其不使用的任何状态。因此，我将其称为一个合理的答案。我想听听您更好的解决方案！

在表单组件中使用箭头函数定义一个提交处理程序，然后调用从mapDispatchToProps传入的我自己的自定义提交处理程序功能。

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

然后，要使此处理程序完全不可知，请将整个this.props传递回自定义处理程序：

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

如果Submit函数只需要不属于表单的值和prop，则我们可以只传回表单不使用的prop。在无状态组件中，可能看起来像：

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]