I've made a mistake several times by forgetting to properly extract the connected action creator from props, as shown below:
import {actionCreator} from 'my-actions';
interface Props {
actionCreator: typeof (actionCreator);
}
const Foo: React.SFC<Props> = (props) => {
// Oops, I forgot to access actionCreator from props
// const { actionCreator } = props;
return (<Button
onClick={actionCreator} // It would be helpful if this caused a compile error - hint, hint Santa!
/>);
}
export const mapDispatch = (dispatch: Dispatch<Action>) => {
return bindActionCreators({
actionCreator,
}, dispatch);
}
export const ConnectedFoo = connect(null, mapDispatch)
The code above will compile without any errors, but unfortunately, it won't trigger any actions in redux.