How to force redux dispatch to finish first before doing a next action?

问题

Hello guys im facing an issue with redux , it seems that wrapping it with a promise does not ensure that the async functions run finish first . Here's some of my code:

apiGet(){               
    // where my dispatch function lives at
    var getstates = this.props.get_states(this.props.match.params.id)
    var gettransitions = this.props.get_transitions(this.props.match.params.id)
    var  workflowclass_fetcher = this.props.get_workflow(this.props.match.params.id)
    Promise.all([getstates, gettransitions , workflowclass_fetcher ]).then(() => {
        this.setState({ done : true });
        console.log(this.props)
    })
}

async componentDidMount(){
    // <---- here i use this await function to ensure that states get cleared first
    await this.props.clearAll()      
    this.apiGet()
}

I then check in my render method if done is true :

return (this.state.done 
    ? //some jsx here
    : <div style={{ textAlign: 'center' }}><Spin size='large' /></div>
)

I would think that the 3 dispatch functions in apiGet would run finish first before the setState is called , however a console.log before my render method shows me that the setState was called before all 3 dispatch were finished. Im confused please help!

EDIT:

Here is my actions :

export const loadTransitions = (workflow_id) =>(dispatch) => {
axiosInstance
.get(`/workflow/transition-meta/list/${workflow_id}/`)
.then((res) => {
  dispatch({
    type: LOAD_TRANSITIONS,
    transitions : res.data,
    state_class_mapping: {}
  });
})
.catch((err) => dispatch(returnErrors(err.response.data, 
err.response.status)));
};

export const loadWorkflow = (workflow_id) =>(dispatch) => {
    axiosInstance
    .get(`/workflow/get/${workflow_id}/`)
    .then((res) => {
      dispatch({
        type: LOAD_WORKFLOW,
        workflow : res.data,
      });
    })
    .catch((err) => dispatch(returnErrors(err.response.data, err.response.status)));
};


export const loadStates = (workflow_id) =>(dispatch) => {
  axiosInstance
  .get(`/workflow/state/list/${workflow_id}/`)
  .then((res) => {
    dispatch({
      type: LOAD_STATES,
      states : res.data,
    });
  })
  .catch((err) => dispatch(returnErrors(err.response.data, err.response.status)));
};

edit v2

Here is the code , however it still seems that isDone is set to true before the dispatch runs finish

export const WorkflowApiGet = (workflow_id) =>(dispatch) => {
  dispatch({
   type: IS_DONE,
   isDone: false
  })
  loadTransitions(workflow_id ,dispatch)
  loadWorkflow(workflow_id, dispatch)
  loadStates(workflow_id, dispatch)
  dispatch({
   type: IS_DONE,
   isDone: true
  })
 }         


async function loadTransitions(workflow_id ,dispatch) { 
  dispatch({
   type: LOAD_TRANSITIONS,
   transitions : {}
  })
  try {
  const res = await axiosInstance.get(`/workflow/transition-meta/list/${workflow_id}/`)
  dispatch({
    type: LOAD_TRANSITIONS,
    transitions : res.data,
    state_class_mapping: {}
  })
  }
  catch (err) { dispatch(returnErrors(err.response.data, err.response.status));
  }
}

来源：https://stackoverflow.com/questions/62103352/how-to-force-redux-dispatch-to-finish-first-before-doing-a-next-action