Redux-form handleSubmit:如何访问存储状态? [英] Redux-form handleSubmit: How to access store state?
问题描述
在进行 Ajax 调用的 redux 形式的 handleSubmit 函数中，Ajax 中需要来自 Redux 状态的一些属性(例如用户 ID).>
如果我想在表单的组件中定义 handleSubmit 这将很容易:只需调用 mapStateToProps 传入我需要的任何内容，然后从 读取它this.props 在我的 handleSubmit 中.
然而，作为一名优秀的 React-Redux 开发人员，我编写单独的视图组件和容器，因此我的视图组件可以很简单，几乎没有行为.因此，我想在我的容器中定义 handleSubmit.
同样，很简单 - redux-form 就是为了做到这一点而设置的.在mapDispatchToProps中定义一个onSubmit，表单会自动调用.
除了，哦等等，在 mapDispatchToProps 中没有办法访问 redux 状态.
好的，没问题，我只是将我需要的 props 和表单值一起传递给 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)) }>或者，更简洁地说，这些都可以组合成一个箭头函数:
然后为了使这个处理程序完全不可知，它可以将整个 this.props 传递回自定义处理程序:
2 在mergeProps 中定义onSubmit 而不是mapDispatchToProps，因此它可以访问stateProps.Dan Abramov 建议不要使用 mergeProps(出于性能原因)，所以这似乎不太理想.
function mergeProps(stateProps, dispatchProps, ownProps) {const { 用户 } = stateProps.authReducer;const { dispatch } = dispatchProps;返回 {...拥有道具，...调度道具，...状态道具，onSubmit: (值) =>{const { 名称，描述 } = 值；const thing = new Thing(name, description, []);dispatch(createNewThing(thing, user.id));}}3 将状态属性复制到 redux-form 字段，这些字段未映射到表单组件中的任何输入控件.这将确保它们可以在传递回 handleSubmit 的 values 参数中访问.这似乎是一种黑客行为.
一定有更好的方法！
有更好的方法吗?
花时间细化这个问题后，选项#1其实还不错，在最后的迭代中(箭头函数通过所有props回到自定义处理程序).它允许组件无状态并且完全不知道它不消耗的任何状态.所以我将称之为一个合理的答案.我很想听到你更好的解决方案！
<小时>在表单组件中使用箭头函数定义一个提交处理程序，然后调用从 mapDispatchToProps 传入的我自己的自定义提交处理程序函数.
然后为了使这个处理程序完全不可知，将整个 this.props 传递回自定义处理程序:
如果提交函数只需要表单中不包含的值和道具，我们可以只传回表单不使用的道具.在无状态组件中，这可能如下所示:
const Thing_Create = ({ fields: {name, description},错误，处理提交，我的提交处理程序，提交，取消，...其他道具}) =>{返回 (<div><form onSubmit={ handleSubmit((values)=>{mySubmitHandler(values, otherprops);}) }>[表单定义的其余部分将放在此处]In a redux-form handleSubmit function, which makes an Ajax call, some properties from the Redux state are needed in the Ajax (e.g. user ID).
This would be easy enough if I wanted to define handleSubmit in the form's component: Just call mapStateToProps to pass in whatever I need, and read it from this.props in my handleSubmit.
However, like a good React-Redux developer I write separate view components and containers, so my view components can be simple with little or no behavior. Therefore, I want to define handleSubmit in my container.
Again, simple - redux-form is set up to do that. Define an onSubmit in mapDispatchToProps, and the form will call it automatically.
Except, oh wait, in mapDispatchToProps there's no way to access redux state.
Okay, no problem, I'll just pass the props I need into handleSubmit along with the form values.
Hmm, wait, it is impossible to pass any data into handleSubmit using this mechanism! You get one parameter, values, and there's no way to add another parameter.
This leaves the following unattractive alternatives (of which I can verify that 1 and 2 work):
1 Define a submit handler in the form component, and from there call my own custom submit handler function passed in from mapDispatchToProps. This is okay, but requires my component to know some props from the redux state that aren't required to display the form. (This issue is not unique to redux-form.)
dumbSubmit(values)
{
const { mySubmitHandler, user} = this.props;
mySubmitHandler(values, user);
}
<form onSubmit={ handleSubmit(this.dumbSubmit.bind(this)) }>
Or, more concisely, this can all be combined into an arrow function:
<form onSubmit={ handleSubmit((values)=>{mySubmitHandler(values, this.props.user);}
Then to make this handler completely agnostic, it could just pass the entire this.props back to the custom handler:
<form onSubmit={ handleSubmit((values)=>{mySubmitHandler(values, this.props);}
2 Define onSubmit in mergeProps instead of mapDispatchToProps, so it has access to stateProps. Dan Abramov recommends against using mergeProps (for performance reasons), so this seems suboptimal.
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 Copy the state properties into redux-form fields which are not mapped to any input controls in the form component. This will ensure they are accessible in the values parameter passed back to handleSubmit. This seems like kind of a hack.
There's got to be a better way!
Is there a better way?
After spending time refining this question, option #1 is actually pretty good, in the final iteration (arrow function that passes all props back to the custom handler). It allows the component to be stateless and completely ignorant of any state that it doesn't consume. So I'm going to call that a reasonable answer. I would love to hear your better solutions!
Define a submit handler using an arrow function in the form component, and from there call my own custom submit handler function passed in from mapDispatchToProps.
<form onSubmit={ handleSubmit((values)=>{mySubmitHandler(values, this.props.user);}
Then to make this handler completely agnostic, pass the entire this.props back to the custom handler:
<form onSubmit={ handleSubmit((values)=>{mySubmitHandler(values, this.props);}
If the Submit function only needs the values and the props that weren't part of the form, we can pass back just those props which the form doesn't use. In a stateless component, this might look like:
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]
这篇关于Redux-form handleSubmit:如何访问存储状态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
