React / Redux отправка формы - PullRequest
Новая
       1

React / Redux отправка формы

0 голосов
/ 27 ноября 2018

В моем приложении я использую действия для выполнения всех моих вызовов ajax.Когда результаты возвращаются, он отправляет их в редуктор, который затем помещает их в магазин.Мой компонент привязан к свойству и затем сможет получить его из магазина.

Однако у меня возникла проблема, когда я пытаюсь найти наилучший способ отправки форм.На странице со списком пользователь может щелкнуть ссылку в любой строке, чтобы открыть модальное окно.Этот модал имеет форму в нем.Когда форма заполнена, она передаст данные в действие, которое отправит их.Единственный ответ от действительной отправки - HTTP 200.

Без использования обратных вызовов, как модал узнает, что вызов ajax завершен, и поэтому может закрыться?На данный момент у меня есть флаг в магазине, который называется form.processing.По умолчанию это значение false, и действие установит его в true, когда оно начнется, и в false, когда оно будет выполнено.Компонент следит за этим, а затем знает, когда он переходит от истинного к ложному, и знает, что все сделано.Однако я чувствую, что должен быть лучший способ.

Или я должен использовать обратный вызов в формах, даже если мы не следуем этому процессу для любого другого вызова ajax?

1 Ответ

0 голосов
/ 27 ноября 2018

Здесь вам может помочь следующий псевдокод: 

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

Здесь я обработал ваш modalPopup с состоянием disaplyModalPopup .И после получения ответа, сохраненного в редукторе, он изменяется как {disaplyModalPopup: false} И HTML-код modalPopUp исчезнет.

Но в случае, если ваш API получить в не удастся делая ответ.Так что в этом случае: у меня есть дескриптор как сообщение об ошибке в виде текста errorMessage , где вы можете показать свое сообщение об ошибке.Так что Модал закрыт рядом.

...