2018-11-27 14:11
采纳率: 0%
浏览 69

React / Redux表单提交

In my application, I am using actions to do all of my ajax calls. When the results come back, it dispatches them to the reducer, which then puts it in the store. My component is bound to the property and will then be able to get it from the store.

However, I am having an issue trying to figure out the best way to do form submissions. From a listing page, a user can click on a link from any row to open a modal. This modal has a form in it. When the form is filled out, it will then pass the data along to an action, which will submit it. The only response from a valid submission is a HTTP 200.

Without using callbacks, how would the modal know that the ajax call is complete, so it can close itself? As of now, I have a flag in the store called form.processing. This is default to false, and the action will set it to true when it begins and false when its done. The component watches this and then knows when it goes from true to false and knows everything is done. However, I feel like there should be a better way.

Or should I be using callback in forms, even though we don't follow that process for any other ajax call?

图片转代码服务由CSDN问答提供 功能建议


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

但是,我在尝试找出提交表单的最佳方法时遇到了问题。 在列表页面中,用户可以单击任意行上的链接以打开模式。 此模态中有一个形式。 填写表格后,它将把数据传递给一个动作,动作将提交它。 有效提交的唯一响应是HTTP 200。

在不使用回调的情况下,模式将如何得知ajax调用已完成,因此可以自行关闭? 到目前为止,我在商店中有一个名为form.processing的标志。 默认为false,操作将在开始时将其设置为true,在完成时将其设置为false。 该组件监视此事件,然后知道它何时从“真”变为“假”,并且知道已完成所有操作。 但是,我觉得应该有更好的方法。


  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • csdnceshi68
    local-host 2018-11-27 14:35

    Here are following pseudo code can help you:

     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) {
                'disaplyModalPopup': false
                'disaplyModalPopup': true,
                'errorMessage': 'something wend wrong'
     rendor (){
         let errorMessage = {this.state.errorMessage}
         let disaplyModalPopup = {this.state.disaplyModalPopup}
         return (
             {disaplyModalPopup ? <modal> </modal> : ''}
             { errorMessage? 'errorMessage': ''}

    Here I have handled your modalPopup with disaplyModalPopup state. And After get in the response saved in reducer, it is changes as {disaplyModalPopup: false} And modalPopUp HTML will disappear.

    But in case your API get in failed while making response. So that case: i have handle as error message in as text errorMessage where you can show your error message. So that Modal is closed side by side.

    点赞 评论