wait for async calls to finish before moving to next step

Question

I am building out a function. It is not working properly and I believe it is because certain pieces of the function are not waiting for async calls to finish to completion. How can I get my function to run cleanly in the order indicated below?

const handleStatusDelete = (status: JobStatusInterface) => {
  let index = unlockedJobStatuses.findIndex((obj) => obj.id === status.id);
  
  // Step 1. This loop should run completely.
  for (let i = index + 1; i < unlockedJobStatuses.length - 1; i++) {
    dispatch(
      updateStatus({
        id: unlockedJobStatuses[i].id,
        status: { ...unlockedJobStatuses[i], order: unlockedJobStatuses[i].order - 1 },
      }),
    );
  }

  // Step 2. This action should run and finish.
  dispatch(deleteJobStatus({ jobStatusId: status.id }));


  // Step 3. This component state update action should run. 
  if (setOrderChangeToggle) {
    setOrderChangeToggle(!orderChangeToggle);
  }
};