Reactjs Redux表单handleSubmit：如何访问存储状态？

在进行Ajax调用的redux表单

handleSubmit

函数中，Ajax中需要redux状态的一些属性（例如用户ID）。

如果我想在表单的组件中定义

handleSubmit

，这将非常简单：只需调用

MapStateTops

传入我需要的任何内容，然后从我的

handleSubmit

中的

This.props

中读取即可

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

同样，simple-redux表单就是为此而设置的。在

mapDispatchToProps

中定义一个

onSubmit

，表单将自动调用它

但是，哦，等等，在

mapDispatchToProps

中，无法访问redux状态

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

handleSubmit

嗯，等等，使用这种机制不可能将任何数据传递到

handleSubmit

！您得到一个参数，

值

，无法添加另一个参数

这就留下了以下没有吸引力的备选方案（我可以验证1和2是否有效）：

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

3将状态属性复制到redux表单字段中，这些字段未映射到表单组件中的任何输入控件。这将确保可以在传递回

handleSubmit

的

值中访问它们。这看起来有点像黑客

一定有更好的办法！
有更好的方法吗？
在花时间精炼这个问题之后，选项1在最后一次迭代中实际上非常好（箭头函数将所有道具传递回自定义处理程序）。它允许组件处于无状态，并且完全不知道它不使用的任何状态。所以我认为这是一个合理的答案。我很想听到你更好的解决方案


在表单组件中使用arrow函数定义提交处理程序，并从中调用从mapDispatchToProps传入的自定义提交处理程序函数

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

{mySubmitHandler（值，this.props.user）；}

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

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

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

{mySubmitHandler（值，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]

const Thing_Create=（{字段：{name，description}，
错误，
手推，
mySubmitHandler，
提交，
一旦取消，
…otherprops}）=>{
返回(
{
mySubmitHandler（值、其他属性）；}}>
[表单定义的其余部分将放在此处]
我通过绑定
这个
解决了这个问题

渲染（）中的某个地方

MapDispatchToProps适用于优秀开发人员：-）

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

利用redux表单传递的
handleSubmit
prop可以使用一个函数作为
onSubmit
prop，并使用部分应用程序传递需要的任何其他参数

操作创建者：

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

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

组成部分

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



这可以很容易地为无状态功能组件重新编写，可以用于任意数量的参数，只要您将它们放在action creator的左侧，并且不需要任何繁重的操作，只需
bind
这是s的一个变体，但您可以通过函数编程分解选项1：

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

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

您可以进一步编写
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) }>

从'ramda'导入{compose，curry}；
const handleSubmit=values=>{/*..code here*/}；
const mySubmitHandler=curry（（道具，值）=>{/*…这里的代码*/}）；
const onSubmit=compose（handleSubmit，mySubmitHandler）；

请注意，
onSubmit（this.props）
返回一个函数，该函数接受一个参数（
值
），并已关闭
this.props
，创建了一个可以访问所需所有属性的函数
 这仍然是最好的方法吗？很好的问答，就像你能读懂我的心思一样。我想知道这种技术是否有一个特定的名称？这是咖喱的一个例子吗？实际上，您是在将二进制函数
mySubmitHandler
包装到另一个一元函数中，即
fn（a）{fn（a，b）}
，我认为这在技术上符合定义。只是curious@sbeam这不是咖喱，但很接近。Currying将声明一个函数
constadd=x=>y=>x+y
，而这更像
constadd=x=>myAdder（x，y）
。我在下面提供了一个更详细的答案。这个问题是关于访问mapDispatchToProps（）中的存储状态的。看起来您的示例只是展示了如何使用handleSubmit的“普通”案例，您只需要访问字段中的数据（无需任何添加）
  handleSubmit(fields) {
    this.props.onSubmit(fields); //this is properly bound, HURRAY :-)
  }

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

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

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

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

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

import { curry } from 'ramda';

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

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) }>