Как создать асинхронную / ожидающую структуру для двух редуксных действий?

Question

У меня есть два действия над функцией смены кнопки, которые зависят друг от друга. Я хочу поместить эти две функции в структуру async / await, чтобы после завершения действия update_other_filter я смог запустить действие getTotalData. Запуск его, как показано ниже, на самом деле не корректно обновляет состояние. Я отправляю предыдущее состояние (перед update_other_filter) в getTotaldata.

Вы, ребята, вероятно, скажете, что я должен отправить getTotalData внутри действия update_other_filter, когда оно разрешится. Но в этом состоянии моего проекта кажется, что я ничего не могу изменить. Я не очень хорошо разбираюсь в концепции async / await и обещаний, поэтому я хочу создать функцию async / await только внутри моего компонента реагирования, а не вызывать ее внутри функции onChange. Есть ли способ сделать это?

onChange = {(event) => {
      this.props.setSpinner()
      //this update filter function updates filter which will be sent to server in getTotalData action
      this.props.update_other_filter(true,"website",!event.target.checked)
      //this action should wait for update_other_filter to end than it has correct parameters to send to server
      this.props.getTotalData(this.props.totalFilters, apiUrl)
      }

Answer 1

// I will make function wait that needs for dependent function and also add some error handling.

async onChange = {(event) => {
   this.props.setSpinner()
   try
   {
   await this.props.update_other_filter(true,"website",!event.target.checked)
   this.props.getTotalData(this.props.totalFilters, apiUrl)
   }
   catch(e)
   {
     thorw e;
    }
}

Answer 2

async onChange = {(event) => {
   this.props.setSpinner()
   await this.props.update_other_filter(true,"website",!event.target.checked)
   this.props.getTotalData(this.props.totalFilters, apiUrl)
}