Redux-form handleSubmit：如何访问 store 状态？

Question

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

如果我想在表单的组件中定义handleSubmit，这很容易：只需调用mapStateToProps 传递我需要的任何内容，然后从this.props 中的handleSubmit 中读取它。

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

再一次，很简单——redux-form 就是为了做到这一点而设置的。在mapDispatchToProps中定义一个onSubmit，表单会自动调用。

除了，哦，等等，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中定义onSubmit而不是mapDispatchToProps，所以它可以访问stateProps。 Dan Abramov recommends against using mergeProps (for performance reasons)，所以这似乎不是最理想的。

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

一定有更好的方法！

有没有更好的方法？

Answer 1

在花时间细化这个问题之后，选项 #1 实际上相当不错，在最终迭代中（将所有道具传递回自定义处理程序的箭头函数）。它允许组件是无状态的，并且完全不知道它不消耗的任何状态。所以我会称这是一个合理的答案。我很想听听你更好的解决方案！

---

使用表单组件中的箭头函数定义提交处理程序，并从那里调用从 mapDispatchToProps 传入的我自己的自定义提交处理程序函数。

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

然后为了使这个处理程序完全不可知，将整个 this.props 传回自定义处理程序：

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

如果 Submit 函数只需要不属于表单的值和道具，我们可以只传回表单不使用的那些道具。在无状态组件中，这可能如下所示：

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]

Answer 2

我发现的最佳方法与您提出的第一个解决方案非常相似。

利用 redux-form 传递的handleSubmit prop 可以采用将用作onSubmit prop 的函数，并使用部分应用程序将您需要的任何其他参数传递给onSubmit。

动作创建者：

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

假设组件获得了一个onUpdateUser 属性，该属性只是将参数直接传递给动作创建者。该组件还获得了user，这是一个具有id 属性的对象，我们希望将其与字段中的值一起传递给动作创建者。

组件

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

这可以很容易地为无状态功能组件重写，只要将它们放在动作创建器的左侧，就可以处理任意数量的参数，并且不需要任何繁重的工作，只需 bind

Answer 3

我可以通过绑定this来解决这个问题。

在 render() 中的某处

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

handleSumit

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

MapDispatchToProps 给优秀的开发者:-)

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

Answer 4

这是 @stone 的 answer 的变体，但您可以通过函数式编程分解选项 1：

const mySubmitHandler = props => values => { /* ...code here */ }

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

在这种情况下，mySubmitHandler 将返回一个函数，该函数只接受一个已在 this.props 上关闭的参数，因此无需明确提及 handleSubmit 正在传递的 values 参数。

您可以通过ramda 以更好、更易读的方式执行mySubmitHandler 的柯里化。

import { curry } from 'ramda';

const mySubmitHandler = curry((props, values) => { /* ...code here */ });

你可以更进一步，组合handleSubmit和mySubmitHandler

import { compose, curry } from 'ramda';

const handleSubmit = values => { /* ...code here */ };
const mySubmitHandler = curry((props, values) => { /* ...code here */ });
const onSubmit = compose(handleSubmit, mySubmitHandler);

<form onSubmit={ onSubmit(this.props) }>

请注意，onSubmit(this.props) 返回一个函数，该函数接受一个参数 (values) 并关闭了 this.props，创建了一个可以访问它需要的所有属性的函数！