How to create async/await structure for two redux actions?

Question

I have two actions on button change function which are dependent on one another. What I want to do is I want to put these two function in async/await structure so that after update_other_filter action ends, that I will be able to run getTotalData action. Running it like below structure actually does not update state in correct way. I am sending previous state(before update_other_filter) in getTotaldata.

You guys will probably say I have to dispatch getTotalData inside update_other_filter action when it resolves. But in this state of my project it seems I can not change anything. I am not really good with async/await and promises concept so, I only want to create async/ await fucntion inside my react component than I want to call it inside onChange function. Is there a way to do that?

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

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

Answer 2

// 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;
    }
}