React/Redux表单提交

Question

在我的应用程序中，我使用操作来执行所有的ajax调用。当结果返回时，它将它们分派给reducer，然后reducer将其放入存储中。我的组件已绑定到该属性，然后将能够从存储中获取它。

然而，我在试图找出提交表格的最佳方式时遇到了一个问题。在列表页面中，用户可以单击任意行中的链接来打开模态。这个模态中有一个表单。填写表单后，它将把数据传递给一个操作，该操作将提交它。有效提交的唯一响应是HTTP 200。

如果不使用回调，模态如何知道ajax调用已经完成，从而可以关闭自己？到目前为止，我在存储中有一个名为form.prrocessing的标志。这是默认的false，操作将在开始时将其设置为true，在完成时将其设为false。组件观察这个，然后知道它何时从真变为假，并知道一切都完成了。然而，我觉得应该有更好的方法。

或者我应该在表单中使用回调，即使我们对任何其他ajax调用都不遵循这个过程？

Answer 1

以下伪代码可以帮助您：

constructor () {
this.state = {
disaplyModalPopup: false;
}
}
handleSubmit = () => {
this.setState({disaplyModalPopup: true})
let payLoad = { 'Key':this.state.something }
this.props.hitAPI(payLoad).then((res) => {
if (res.data.success) {
this.setState({
'disaplyModalPopup': false
})
}else{
this.setState({
'disaplyModalPopup': true,
'errorMessage': 'something wend wrong'
})
}
})
}
rendor (){
let errorMessage = {this.state.errorMessage}
let disaplyModalPopup = {this.state.disaplyModalPopup}
return (
{disaplyModalPopup ? <modal> </modal> : ''}
{ errorMessage? 'errorMessage': ''}
)
}

在这里，我已经用displyModalPopup状态处理了您的modalPopup。在得到保存在reducer中的响应后，它将更改为｛disallyModalPopup:false｝并且modalPopUp HTML将消失。

但如果您的API进入失败时做出响应。因此，在这种情况下：我将错误消息作为文本处理errorMessage，您可以在其中显示错误消息。所以莫代尔是并排关闭的。