actionCreator.js

export const updateAlert = (alert, message) => {
  return {
    type: 'UPDATE_ALERT',
    alert,
    message
  }
}

export const updateAlertThenDelete = (alert, message) => {
  return function (dispatch) {
    return dispatch(
      updateAlert(alert, message).then(() => {
        console.log('done');
      })
    )
  }
}

component.js

this.props.updateAlertThenDelete('error', ERROR_MESSAGE)

updateAlert returns an object with 3 properties. It returns this object whenever you call the function. then is not one of the properties of the object returned. Therefore you cannot call then(...). Since then is undefined it isn't a function/method. Presumably you're trying to wait on a pending Promise but nowhere in your code is such a promise created. Now that you only need promises or callbacks when you need to wait for something like a network request. In your code no such waitable task is to be found. But let's say that you had such a task and let's say updateAlert did in fact return a promise. You would be calling then on it and the handler function does a console.log. The result of thethen call is another promise, one that always resolves, eventually, to undefined because your then handler doesn't return anything. Next you're passing this promise to dispatch which has no idea what to do with a promise and will throw an error.

@ddsol, you're right. I think I was overthinking this. I don't even need a callback in this instance.. all I need to do is:

  waitTurn() {
    const ERROR_MESSAGE = 'Please wait your turn.';

    this.props.updateAlert('error', ERROR_MESSAGE)
    setTimeout(() => {
      console.log('remove alert code here');
    }, 5000)
  }

Thank you for explaining everything to me, it's now starting to make sense. I appreciate it!