小编典典

Redux形式的handleSubmit:如何访问存储状态?

reactjs

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

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

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

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

除非等等,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。

一定有更好的方法!

有没有更好的办法?


阅读 325

收藏
2020-07-22

共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]
2020-07-22