my store is not updating - reactjs

Question

I am using redux and react-redux.
I have a huge list of data which are the occupations of a user.
I have this container that is connected to the redux via connect of react-redux.
// ChangeOccupations.js
import React, { Component } from 'react';
import { connect } from 'react-redux';
import ChangeOccupation from '../../../../components/pages/admin/subs/ChangeOccupation';
import {
occupation_update
} from '../../../../actions/edit';
class ChangeOccupations extends Component {
render() {
let occupations = this.props.occupations.map((occupation, i) => <ChangeOccupation occupation={occupation} original={occupation} index={i} key={i} occupationUpdate={this.props.occupationUpdate} />);
return (
<div>
<p className="title">Change Your Occupations</p>
{occupations}
</div>
);
}
}
function mapStateToProps(store) {
return {
occupations: store.edit.occupations
}
}
function mapDispatchToProps(dispatch) {
return {
occupationUpdate: payload => dispatch(occupation_update(payload))
}
}
export default connect(mapStateToProps, mapDispatchToProps)(ChangeOccupations);
then a component.
// ChangeOccupation.js
import React, { Component } from 'react';
class ChangeOccupation extends Component {
constructor(props) {
super(props);
this.changeCompany = this.changeCompany.bind(this);
this.changeFreelance = this.changeFreelance.bind(this);
}
changeCompany(event) {
let value = event.target.value;
this.props.occupationUpdate({
index: this.props.index,
occupation: {
...this.props.occupation,
company: value
}
});
}
changeFreelance() {
console.log(this.props.occupation.freelance);
if(this.props.occupation.freelance == 1) {
return this.props.occupationUpdate({
index: this.props.index,
occupation: {
...this.props.occupation,
freelance: 0
}
});
}
return this.props.occupationUpdate({
index: this.props.index,
occupation: {
...this.props.occupation,
freelance: 1
}
});
}
render() {
console.log(this.props.occupationUpdate);
return (
<form method="post" action="">
<ul className="ul-blocked-li">
<li><input type="text" placeholder="Company name..." value={this.props.occupation.company? this.props.occupation.company: ''} onChange={this.changeCompany} /></li>
<li><input type="text" placeholder="Job title..." value={this.props.occupation.title} onChange={this.changeCompany} /></li>
<li>
<input type="hidden" value={this.props.occupation.freelance} />
<input id="freelance" type="checkbox" onChange={this.changeFreelance} />
<label htmlFor="freelance">I am a freelancer</label>
</li>
</ul>
</form>
);
}
}
export default ChangeOccupation;
so the container is connected to redux and it will receive all the occupations data and the dispatches. It will then render all the occupations data via the this.props.occupations.map() using the <ChangeOccupation /> component which will receive all the props and dispatches, you can see it on this line:
let occupations = this.props.occupations.map((occupation, i) => <ChangeOccupation occupation={occupation} original={occupation} index={i} key={i} />);
the problem is that when the <ChangeOccupation/> component dispatches an action it doesn't seem to update or anything, but it does reach the reducer. What could be the possible problems?