Async / Await - Redux Thunk with a returned value

[oli-laban]

Flow version: ^0.92.0

Expected behavior

No errors.

Actual behavior

Cannot call await with `checkAuthStatus()` bound to `p` because `ThunkAction` [1] is incompatible with `Promise` [2].

---

I'm trying to Flow type a Redux Thunk action that has a return value. I think this is related to #5294 in that I'm getting the same useless error as some of the comments although none of the workarounds posted are working for me.

I'm using the Redux Thunk example from the Flow docs (I've tried adding an explicit return type of Promise to the ThunkAction and async inner function):

type PromiseAction = Promise<Action>;
type ThunkAction = (dispatch: Dispatch, getState: GetState) => any;
type Dispatch = (action: Action | ThunkAction | PromiseAction | Array<Action>) => any;

export const checkAuthStatus = (): ThunkAction => async (dispatch) => {
  const loggedIn: boolean = false;
  const promptSkipped: boolean = true;

  dispatch(setLoggedIn(loggedIn));

  return promptSkipped;
};

This works if I simply call await checkAuthStatus(), but if I try to assign the returned value (const promptSkipped = await checkAuthStatus()), I get the above error.

Try-Flow Example

---

I'm brand-new to Flow so hopefully there isn't a glaringly obvious problem with the way I'm trying to do this. StackOverflow question here.

[goodmind]

You're returning function, not promise

[oli-laban]

@goodmind I'm returning a function that returns a Promise, yes.

[jcready]

Yes, and you shouldn't be awaiting the function. You should be awaiting the promise returned from the function: https://flow.org/try/#0PQKgBAAgZgNg9gdzCYAoVAXAngBwKZgDKGAhhgQLxgDeqYYA1PAObN4AmAkgHYBcYAIzhwYeEtwA0dRjgBOcALY4MhANYBLHPnb8hIsZNQBfdNnxgAggGMM6uNzAVpAHyJ4MAGTisOPa7fsAbnRgYDAAFRJVPAcoeQUwAAsMDBwAZ15Q2EQAOjhZZmAY4HY4KzTgWTEbSo4AVwAPNDMCAHF3YjJKMAAKAEpHAD4iUnJglrAABXj1NLx-OwcqacVZvAAeBftB8dwCcMS67lUtpd72WZwyK0T+ABFL68SJMDYVUbx+dveugYph8RYXbmB5pK4YG6OXokGyLfinMCuA5HE6w+yIqYzOYI1wWWSyEhYTZo7iDP4A7hA1DsPBWGAkKpgABuDLAFzBT3ujwhiWCNLpDIILNkrw6Hy+Yq6wTwDRw+QwYCs9jSCputJOdQwiU6GDqaSh-X4yOOCP+YBIaSw3Cs525N3JNGkSu4KrALDYXD4gmEonEUKgJBgc2C9GdrrkimUak02l0PoMUIwsjqeGC0nZ4JuPTmnm8Hp4PXdvm4fT6afoVV1sgcEaUKg0Wg4wSMabDCvIKoAwol1RZNdrRnqoRarTb+kNHaHlQra1GG9phwgSOpVT2rBqtTq9f0ehmni83jq8GXpNJQhFErMwFetQQYOpuAQtWQwGlEnA6jB2IICHh8fkH2YMAoHyc0UjwOtALADA4HNdhvxIV8kygmDzW9fRxByJ1lX0HIWB6Wd6xjDhGDAAByEC4DIk8W1MPY3FzHxPVNSdoL2fgyMIABRcIAH0PAAeVaVouLuXjOAAOTIqR6CuLB4BIHR0N9QxaNQGU5VkVVp1fdwvCYngDVmfT8y9PQVIdHpqDY-AOO4vjBOE0TxKkl45IUpTjLzYswCME9UCAA

[oli-laban]

@jcready Thanks, how would this work in a component context where the redux-thunk middleware handles the calling of the inner function? e.g.

async componentDidMount() => {
  const promptSkipped = await this.props.authStatus();
  ...
}

...

const mapDispatchToProps = (dispatch: Dispatch) => {
  authStatus: dispatch(checkAuthStatus()),
};

export default connect(null, mapDispatchToProps)(TheComponent)