Action creators passed to connect with bindActionCreators are not typesafe

[C-Higgins]

const actions = {
	test: () => 1, // Obviously not an action creator
}
const mapStateToProps = (state: RootState) => state
// No Errors
const mapDispatchToProps = (dispatch: Dispatch<RootAction>) => bindActionCreators(actions, dispatch)
const cnRoomWrapper = connect(mapStateToProps, mapDispatchToProps)(RoomWrapper)

However, there is an error if I explicity wrap the dispatch:

// Gives correct error
const mapDispatchToProps = (dispatch: Dispatch<RootAction>) => {
    test: () => dispatch(actions.test)
})

How can I validate that the correct actions are being passed to connect?

[IssueHuntBot]

@issuehuntfest has funded $20.00 to this issue. See it on IssueHunt

[WojciechMatuszewski]

I only started using typescript + react recently but i think you have to pass types to bindActionCreators explicitly

For example

export interface BuyAction extends Action<string> {
  type: 'BUY';
}
export interface RentAction extends Action<string> {
  type: 'RENT';
}
export const Buy: ActionCreator<BuyAction> = () => ({
  type: 'BUY'
});
export const Rent: ActionCreator<RentAction> = () => ({
  type: 'RENT'
});
type BikeActions = BuyAction | RentAction;
// --- //
const bikeActionCreators: ActionCreatorsMapObject<BikeActions> = {
  BuyAction: Buy,
  RentAction: Rent
};

const actions = {
  test: () => 1 // Obviously not an action creator
};

const mapStateToProps = (state: {}) => state;
const mapDispatchToProps = (dispatch: Dispatch<BuyAction>) =>
  bindActionCreators<BikeActions, typeof bikeActionCreators>(
    // typescript complains here, replace with bikeActionCreators to remove the error
    actions,
    dispatch
  );

[piotrwitek]

Hey @C-Higgins, I think you have the same issue: #6

This need to be fixed upstream, AFAICT fix is on the way.

Also you have this warning: https://github.com/piotrwitek/react-redux-typescript-guide#caveat-with-bindactioncreators

[piotrwitek]

Hey @C-Higgins, I solved it and added a proper solution in the guide:

// You can add extra layer of validation of your action creators
// by using bindActionCreators generic type parameter and RootAction type
const mapDispatchToProps = (dispatch: Dispatch<MyTypes.RootAction>) =>
  bindActionCreators<ActionCreatorsMapObject<Types.RootAction>>({
    invalidActionCreator: () => 1, // Error: Type 'number' is not assignable to type '{ type: "todos/ADD"; payload: Todo; } | { ... }
  }, dispatch);

You can find it in the recently added section: https://github.com/piotrwitek/react-redux-typescript-guide#connect-with-react-redux

[IssueHuntBot]

@piotrwitek has rewarded $14.00 to @piotrwitek. See it on IssueHunt

• 💰 Total deposit: $20.00
• 🎉 Repository reward(20%): $4.00
• 🔧 Service fee(10%): $2.00