在进行handleSubmitAjax调用的redux-form 函数中,Ajax中需要Redux状态的某些属性(例如,用户ID)。
handleSubmit
这将是很容易的,如果我想定义handleSubmit形式的成分,只要调用:mapStateToProps在任何我需要传递,并从阅读this.props中我的handleSubmit。
mapStateToProps
this.props
但是,像一个出色的React-Redux开发人员一样,我编写了 单独的视图组件和容器 ,因此视图组件可以很简单,几乎没有行为。因此,我想 在我的container中定义handleSubmit 。
同样,设置简单-redux-form来做到这一点。定义一个onSubmit在mapDispatchToProps和形式会自动调用它。
onSubmit
mapDispatchToProps
除非等等,mapDispatchToProps否则无法访问redux状态。
好的,没问题,我将需要的道具handleSubmit和表单值一起传递给我。
嗯,等等,handleSubmit使用这种机制不可能传递任何数据!您将获得一个参数,values而无法添加另一个参数。
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。
有没有更好的办法?
在花时间完善了这个问题之后,选项#1 在最终迭代中 实际上是相当不错的 (将所有prop传递回自定义处理程序的箭头函数)。它允许组件为无状态的,并且完全不了解其不使用的任何状态。因此,我将其称为一个合理的答案。我想听听您更好的解决方案!
在表单组件中使用箭头函数定义一个提交处理程序,然后调用从mapDispatchToProps传入的我自己的自定义提交处理程序功能。
然后,要使此处理程序完全不可知,请将整个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]