Incorrect action creator type when using bindActionCreators and redux-thunk

[rluiten]

Specifically I have this action defined.

getTransitionForm: (params: GetTransitionFormParams) =>
    (dispatch: Dispatch<RootState>, getState: () => RootState, extraArgument: any) => 
         Promise<any>;

When mapped as follows as per your guide from section "Connected Container without OwnProps using Type Inference" https://github.com/piotrwitek/react-redux-typescript-guide#connected-container-with-ownprops

export const mapDispatchToProps = (dispatch: Dispatch<RootState>) =>
  bindActionCreators(
    {
      getTransitionForm,
    },
    dispatch
  );
const dispatchProps = returntypeof(mapDispatchToProps);

The resulting value of dispatchProps is

const dispatchProps: {
    getTransitionForm: (params: GetTransitionFormParams) =>
        (dispatch: Dispatch<RootState>, getState: () => RootState, extraArgument: any) => 
             Promise<any>;
}

I believe after binding it should be.

const dispatchProps: {
    getTransitionForm: (params: GetTransitionFormParams) => Promise<any>;
}

Which I expect is not going to be easy to derive.
I only discovered this as I wanted to do something with the returned promise.
Thanks for your great guide.

[piotrwitek]

@rluiten hello
EDIT: After writing my post I have noticed that maybe you forgot that you have a thunk action opposed to regular action creator and that is why the resulting value of dispatchProps is wrapped in another function, when you take it out, then everything is correct :)

Original response:
This is how bindActionCreators declaration looks:

export function bindActionCreators<M extends ActionCreatorsMapObject>(actionCreators: M, dispatch: Dispatch<any>): M;

As you can see it will return ActionCreatorsMapObject, so resulting value of dispatchProps is perfectly fine.
Moreover when you check the type of getTransitionForm prop in the connected component you will find you have exactly the type you have expected after the binding.

This is what I have in my project, the dispatched action is returning a Promise with updated model or undefined, which works exactly as I expect (this is a thunk action, so there is an additional function wrapper):

const mapDispatchToProps = (dispatch: Dispatch) => bindActionCreators({
  updateRegion: SitesReducer.updateRegion,
}, dispatch);
...
const updatedRegion = await this.props.updateRegion(region); // updateRegion: (payload: RegionModel) => (dispatch: Dispatch<RootState>, getState: () => RootState) => Promise<void | RegionModel | undefined>

PS: if your question is resolved, then please mark it closed. Thanks.

[rluiten]

I freely admit I might have flubbed something.
But it compiles with no errors and appears to work (but that might be pure fluke).

Definition of my Component and its properties.

interface RouteParams {
  transitionStatementId: number;
}
export interface OwnProps extends RouteComponentProps<RouteParams> {}
export const mapDispatchToProps = (dispatch: Dispatch<RootState>) =>
  bindActionCreators(
    {
      getTransitionForm
    },
    dispatch
  );
const stateProps = returntypeof(mapStateToProps);
const dispatchProps = returntypeof(mapDispatchToProps);
export type Props = typeof stateProps & typeof dispatchProps & OwnProps;

class TransitionForm extends React.Component<AllProps, OwnState> { /* etc */ }

Inside my components member functions the type of 'props.getTransitionForm` appears to be.
(conveniently visible in VSCode but I did not assume VSCode was correct)
I am calling the action from a submit() function that is part of redux-form.

(params: GetTransitionFormParams) =>
        (dispatch: Dispatch<RootState>, getState: () => RootState, extraArgument: any) => 
             Promise<any>;

The fire*Action() functions are just examples.

I setup a test and i can use await it compiles with no errors, and appears to work correctly.

    const getPayload = {state, apiUrls, transitionStatementId: 23};
    const getResult  = getTransitionForm(getPayload);
    try {
        await getResult;
        fireGotAction();
    } catch (e) { 
        fireErrorGotAction();
    }

If I use .then() I get a compile error.

The getResult above gives me the compile error where i try to use .then().
TS2339: Property 'then' does not exist on type 'ThunkAction<Promise<any>, RootState, any>'.

    const getPayload = {state, apiUrls, transitionStatementId: 23};
    const getResult  = getTransitionForm(getPayload);
    getResult.then(() => fireGotAction(), () => fireErrorGotAction());  

This leads me to believe the types are not really correct, I am not implying they are easy to fix or can be fixed, I fudged the type for myself for now. It appears await isn't enforcing type constraints equivalently to .then(), and since the underlying value is actually a promise await works anyway.

Currently i am just casting the property action to any to call then and all seems well with the world.

Thanks for your response, I raised this more to see if it rings a bell with you that might point out something I had missed or possibly even something you can address. I think its complex enough some sort of fix might not be easy and may require much deeper type knowledge than I have, or even typescript may not be able to do express the constraint in its current version.

Thanks,

[piotrwitek]

@rluiten this time I have thoroughly investigated and I found you are right, types are not correct but only for the thunk action creators.
Specifically bindActionCreators could have been augmented by redux-thunk to fix that behaviour.

The types returned from connect should have bound action creators, but it seems they are still typed as thunk action creators so dispatch is not correctly applied.

When I changed mapDispatchToProps declaration to not use bindActionCreators it's fixed, you can try:
const mapDispatchToProps = (dispatch: Dispatch) => ({
updateRegion: (payload: RegionModel) => dispatch(SitesReducer.updateRegion(payload)),
});

The second one works because this time dispatch is correctly augmented by redux-thunk typings.

The necessary fix is to augment bindActionCreators to apply augmented dispatch that can handle thunk actions, but it's not possible with current Type Inference limitations.

[rluiten]

Awesome, I have learned so much from this, and your answer makes a lot of sense.
Thanks for persisting with this :).

[piotrwitek]

@rluiten no problem, me as well learned a new trick :)

I'll add it later to the guide as caveat giving you a well earned credit :)

[brianpaulcarpenter]

Hi, I just bumped into this issue as well and indeed switching away from bindActionCreators worked. Has anyone posted this to the redux team, to see if they can fix it? I can't find much documentation on this problem other than this thread. thanks