Reactjs: немедленно обновить данные состояния (из магазина)

Question

Я использую реакцию с потоком.

У меня есть функция в моем компоненте, который вызывает выполняет действие на клик:

onClickEventEdit: function(itemId) { 

     ScheduleActions.getEventById(itemId) // this ultimately is set into `currentEventById` state 

     var title = this.state.currentEventById['title'] || "" 

     console.log(title) // logs nothing 
     console.log(this.state.currentEventById) //logs empty object {} 

     // then show modal 
     $('#eventSelectedModal').modal({ 
      show: true 
     }); 

    }, 

My ScheduleAction является Ajax вызова для получения информации о событии. Когда действие Ajax выполняется, оно обновляет мой магазин. У меня создается впечатление, что он обновляет мой магазин после назначения заголовка и журналов.

Как я могу получить доступ к этой информации после вызова действия, чтобы сразу отобразить информацию клиенту?

Answer 1

AJAX звонки (технически XMLHttpRequests) выполняются асинхронно. Это означает, что ваш синхронный код будет продолжать работать, пока HTTP-вызов все еще ожидает ответа. Это приводит к точному поведению, которое вы ожидаете.

Простейшим решением было бы расширить метод getEventById() с помощью параметра обратного вызова, который вызывается, когда асинхронный вызов завершен. Теперь вы можете переместить код, который должен быть выполнен после вызова в обратном вызове, эффективно задерживая его выполнение;

onClickEventEdit: function(itemId) { 

    ScheduleActions.getEventById(itemId, function() { 

     var title = this.state.currentEventById['title'] || "" 

     console.log(title) // logs nothing 
     console.log(this.state.currentEventById) //logs empty object {} 

     // then show modal 
     $('#eventSelectedModal').modal({ 
      show: true 
     }); 
    }); 
}, 

Для еще более чистого раствора, вы можете посмотреть в Promises.