async functions dispatch

[davibe]

I discovered by accident that i can dispatch an async function like this

dispatch(async (dispatch, getState) => {
  const data = await networkReq();
  dispatch(updateWith(data));
});

I wonder if this is because babel translates it into something that works by accident, or what. It it safe to assume this is right ?

[TrySound]

@davibe It's quite safe. The same as you return promise and chain it. thunk doesn't matter how you execute your async code.

[davibe]

@TrySound so if i can do that, what is the meaning of my thunks return value ?

i.e. i could write

dispatch(async (dispatch, getState) => {
  const data = await networkReq();
  return { type: 'NEW_DATA', payload: data }
});

or without async

dispatch((dispatch, getState) => {
  return networkReq().then( (data) => { 
    return { type: 'NEW_DATA', payload: data }
  });
});

For some reason i expected thunk to dispatch my final action without calling dispatch myself. What should i use the return value for ? Thank you.

[TrySound]

@davibe thunk delegates dispatch calling to you.

const result = dispatch((dispatch, getState) => {
  return networkReq().then( (data) => { 
    return { type: 'NEW_DATA', payload: data }
  });
});
// result is equal to { type: 'NEW_DATA', payload: data }

But you can do this If you will use redux-promise. thunk doesn't do anything with promise or async api.

[davibe]

@TrySound i did also use redux-promise middleware but apparently when the promise is returned by an async-thunk it does not get dispatched anyway. I can dispatch(promise) but that's rather useless because since the thunk can be async i can dispatch(await getPromised()) with no additional middleware.

[davibe]

Thank you for helping my neurons spin. I think i can close this now :)