piotrwitek / react-redux-typescript-guide

The complete guide to static typing in "React & Redux" apps using TypeScript
https://piotrwitek.github.io/react-redux-typescript-guide/
MIT License
13.35k stars 1.09k forks source link

`bindActionCreators` example is outdated #203

Open gocreating opened 4 years ago

gocreating commented 4 years ago

The example of bindActionCreators does not pass generic parameters. Either, optionally pass only one generic parameter: bindActionCreators<ActionCreatorsMapObject<Types.RootAction>>.

Without generic parameters, react component will report not assignable error. The latest redux's bindActionCreators also accepts exact 2 generic parameters. So the example seems outdated.

My current workaround is bindActionCreators<any, any>:

const mapStateToProps = (state: RootState) => ({
  ...
});

const mapDispatchToProps = (dispatch: Dispatch<RootAction>) => bindActionCreators<any, any>({
  ...
}, dispatch);

type Props = ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps>

But the Props is then inferred as type any, which is unacceptable for me. If I change to bindActionCreators<any, ActionCreatorsMapObject<RootAction>>, then my react component starts to report not assignable error again...

const MyComponent: React.FunctionComponent<Props> = ({ ... }) => {
  ...
};

MyComponent.propTypes = {
  ...
};

export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);

I am really confused about the correct usage of bindActionCreators. Anyone can help? Thanks!