Why isn't mapDispatchToProps being called after linking to my component? - reactjs

Question

I have a component that looks like this (/Inputs/AddPersonForm):
import React, { Component } from 'react';
import { connect } from 'react-redux';
import {
BrowserRouter as Router,
Route,
Link,
Redirect,
withRouter
} from "react-router-dom";
import { addPerson } from '../Actions/personActions';
import { Person } from '../Components/Person'
export class AddPersonForm extends Component {
constructor(props) {
super(props)
this.state = {
//TODO initialize name to value that was just searched for to make UI
cleaner
name: '',
description: '',
location:'',
}
}
handleOnChange = event => {
const { value, name } = event.target;
this.setState({
[name]: value,
});
}
handleOnSubmit = event => {
const person = Object.assign({}, this.state);
event.preventDefault();
//mapdispatchtoprops not working when linking to this component
this.props.addPerson(person);
this.setState({
name: '',
description: '',
location:'',
});
}
componentDidMount() {
alert("The person you are searching for does not yet exist in our
system. Please add their name, a physical description, and their city,
state, and zip code.")
}
render() {
return (
<div className="container">
<div className="row">
<div className="col-md-8 col-md-offset-2">
<div className="panel panel-default">
<div className="panel-body">
<form className="form-horizontal" onSubmit={this.handleOnSubmit}>
<div className="form-group">
<label htmlFor="name" className="col-md-4 control-label">Person's Name</label>
<div className="col-md-5">
<input
className="form-control"
name="name"
value={this.state.name}
onChange={this.handleOnChange}
/>
</div>
</div>
<div className="form-group">
<label htmlFor="description" className="col-md-4 control-label">Physical Description</label>
<div className="col-md-5">
<textarea
className="form-control"
name="description"
value={this.state.description}
onChange={this.handleOnChange}
/>
</div>
</div>
<div className="form-group">
<label htmlFor="location" className="col-md-4 control-label">Location</label>
<div className="col-md-5">
<input
className="form-control"
type="text"
name="location"
value={this.state.location}
onChange={this.handleOnChange}
/>
</div>
</div>
<div className="form-group">
<div className="col-md-6 col-md-offset-4">
<button type="submit" className="btn btn-default">Add Person to Archive</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
);
}
}
const mapDispatchToProps = () => {
debugger;
return {
addPerson: addPerson
};
};
export default connect(null, mapDispatchToProps)(AddPersonForm);
I have a redirect to the that component and a link to it from this component (/Components/Person):
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { AddPersonForm } from '../Inputs/AddPersonForm';
import AddReviewForm from '../Inputs/AddReviewForm';
import { FormattedPerson } from '../Presentational/FormattedPerson';
import {
BrowserRouter as Router,
Route,
Link,
Redirect,
Switch
} from "react-router-dom";
export class Person extends Component {
render() {
if (this.props.person == "unfound") {
return (
<div>
{this.props.history.push('/add-person')}
</div>
)
} else {
return (
<div>
<div className= "container">
<Router>
<div>
<Link to={`${this.props.match.url}/reviews/new`}>
Add a New Review for this Person
</Link><br />
<Link to='/add-person'
>Not the {this.props.person.name} you were looking for? Add them to our system!
</Link>
<div>
<Switch>
<Route path={`${this.props.match.url}/reviews/new`}
component={AddReviewForm} />
<Route path='/add-person' component={AddPersonForm}/>
</Switch>
</div>
</div>
</Router>
</div>
<FormattedPerson name= {this.props.person.name} description= {this.props.person.description} location= {this.props.person.location} reviews= {this.props.person.reviews}
/>
</div>
);
}
}
}
function mapStateToProps(state){
return {person: state.peopleReducer.person}
}
export default connect(mapStateToProps, null)(Person);
When I navigate via the redirect, everything works fine, mapDispatchToProps is called, and I can submit the form. But when I navigate via the link, mapDispatchToProps is not called, so when I try to submit the form, I get an error saying "this.props.addPerson is not a function". Why is this happening?

Answer 1

You have two exports, one at the first line and one at the last one. Remove the first.