function not found after mapDispatchToProps - reactjs

Question

Hi to all react geniuses. I am a newbie and I am trying to achieve a very simple thing here.
Below is the code, which tries to call a function sentTheAlert() on button click. However, I get error in my console.
import React from 'react';
import { connect } from 'react-redux';
import { Button } from 'reactstrap';
import { RouteComponentProps } from 'react-router-dom';
export interface IFancyAlerterProps extends StateProps, DispatchProps, RouteComponentProps<{}> {}
export class FancyAlerter extends React.Component<IFancyAlerterProps> {
handleSubmit= () => {
this.props.sendTheAlert('hello');
};
render() {
return (
<div>
<h1>Today Fancy Alert is {this.props.fancyInfo}</h1>
<Button color="primary" onClick={this.handleSubmit}>
See my Alert
</Button>
</div>
);
}
}
const SEND_MESSAGE = 'SEND_MESSAGE';
interface SendAlertType {
type: typeof SEND_MESSAGE;
payload: string;
}
function sendTheAlert(newMessage: string): SendAlertType {
return {
type: SEND_MESSAGE,
payload: newMessage,
};
}
const mapDispatchToProps = { sendTheAlert };
function mapStateToProps(state) {
return { fancyInfo: 'Fancy this:' + state.currentFunnyString };
}
type StateProps = ReturnType<typeof mapStateToProps>;
type DispatchProps = typeof mapDispatchToProps;
export default connect(mapStateToProps, mapDispatchToProps)(FancyAlerter);
Note: If this information helps, I create a jhispter application with react UI. And tried to add a new component (FancyAlerter). All the old components are able to get my function however, the new component is unable to get this function or any other function.
So, I just don't understand the mechanics I believe. Any help would be really appreciated.
UPDATE: In the above code, the props contains methods from RouteComponentProps but not from the other two types.

Answer 1

It looks like problem about using object for mapDispatchToProps. When you use mapDispatchToProps as an Object you should provide action creator, not void function :
const SEND_MESSAGE = 'SEND_MESSAGE'
interface SendAlertType {
type: typeof SEND_MESSAGE
payload: String
}
function sendTheAlert(newMessage: String): SendAlertType {
return {
type: SEND_MESSAGE,
payload: newMessage
}
}
const mapDispatchToProps = { sendTheAlert };
Later on you can fire an alert on middleware (saga, thunk, etc.).
Check for the usage : https://daveceddia.com/redux-mapdispatchtoprops-object-form/
Test your code : https://codesandbox.io/s/icy-lake-h3rxr?file=/src/CounterMapDispatchObj.js

Answer 2

Thanks for looking into the issue. I figured it out. Of course all your answers helped me eliminate the possible causes.
Seems like how a component is imported makes a lot of difference i the react router file where all the routes were defined.
Supposedly below is my route
<ErrorBoundaryRoute path="/fancy" component={FancyAlerter} />
And the way you import this component is
import FancyAlerter from './modules/fancyalert/fancyalert';
Instead of
import { FancyAlerter } from './modules/fancyalert/fancyalert';