After I submit my form the component does not update to render the new information - node.js

Question

I have a component with a forum (redux-form) that adds a food to the data. After I click "ADD" the information I add in the form is added to the database, however, the component that renders the list of food does not update automatically unless I manually refresh the page. Then the new food is rendered in the component.
Not sure why this is not rendering the new information automatically
Stock.js (where the food list is rendered)
import _ from 'lodash';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchFoodList, addToPot, deleteFood } from '../actions';
import Header from './header';
import Pot from './pot';
import AddFood from './add_food';
import RecipeList from './recipe_list';
import classes from "../index.css";
import { Row, Col } from 'react-flexbox-grid';
class FoodList extends Component {
componentDidMount () {
this.props.fetchFoodList();
}
addIngredientToPot = (ev) => {
const val = ev.target.dataset.value;
const newPot = [ ...this.props.pot,
val
];
this.props.addToPot(newPot)
}
onDeleteClick = (ev) =>{
// const {id} = this.props.match.params;
const val = ev.target.dataset.value;
this.props.deleteFood(val);
}
displayFoodList() {
return _.map(this.props.foods, food => {
return (
<li key={food._id} className={classes.tablerow}>
<div data-value={food.name}
onClick={this.addIngredientToPot.bind(this)}
className={classes.col1}>{food.name}
</div>
<div className={classes.col2}>{food.type}</div>
<div className={classes.col3}>
<button data-value={food._id}
onClick={this.onDeleteClick.bind(this)}
className={classes.throwoutbutton}
> Throw Out
</button>
</div>
</li>
);
});
}
render () {
// console.log(this.props.foods);
// console.log(this.props.pot)
return (
<div className={classes.stockpilecontainer}>
<Header />
<Row>
<Col lg >
<h2>StockPile</h2>
<ul className={classes.responsivetable}>
<li className={classes.tableheader}>
<div className={classes.col1}>Name</div>
<div className={classes.col2}>Type</div>
<div className={classes.col3}>Throw Out</div>
</li>
{this.displayFoodList()}
</ul>
<div>
<AddFood/>
</div>
</Col>
<Col/>
<Pot/>
<Col/>
</Row>
<Row>
<Col xs={12}>
<Row center="xs">
<RecipeList xs={6} />
</Row>
</Col>
</Row>
</div>
);
};
}
function mapStateToProps(state) {
return {
foods: state.foods,
pot: state.pot.pot,
};
}
export default connect (mapStateToProps, { fetchFoodList, addToPot, deleteFood })(FoodList);
Newfood.js (component with form to add a new food item)
import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';
import { connect } from 'react-redux';
import { addFood } from '../actions';
import classes from "../index.css";
import { Redirect } from 'react-router-dom';
const renderField= field => {
const { input, type } = field;
return (
<div className={classes.addfoodinput}>
<label className={classes.addfoodlabel}>{field.label}</label>
<input {...input} type={type} className="form-control" />
</div>
)
}
class AddFood extends Component {
onSubmit(values) {
this.props.addFood(values);
}
render () {
const { handleSubmit } = this.props;
return (
<form onSubmit={handleSubmit(this.onSubmit.bind(this))} className={classes.addfoodform}>
<Field
label="Food "
name="name"
component={renderField}
/>
<Field
label="Type "
name="type"
component={renderField}
/>
<button type="submit" className={classes.addfoodbutton} >ADD</button>
<button className={classes.addfoodbutton}>Cancel</button>
{/* <Redirect to={'/stockpile'} /> */}
</form>
)
}
};
AddFood = reduxForm({
form: 'NewFoodForm',
fields: ['name', 'type'],
})(AddFood);
export default connect(null, {addFood})(AddFood)
Reducer for the food list:
import _ from 'lodash';
import { FETCH_FOODLIST } from '../actions/types';
export default function(state = {}, action) {
switch (action.type) {
case FETCH_FOODLIST:
return _.mapKeys(action.payload.data, '_id');
default:
return state;
}
}
Action creators for adding new food and get the food list:
// Action to get the food list:
export const fetchFoodList = () => dispatch => {
Axios
.get(`${ROOT_URL}/myfoodlist`, {
headers: { auth: localStorage.getItem('token') }
})
.then( response =>
dispatch({
type: FETCH_FOODLIST,
payload: response
}));
};
// Add a food to the DB:
export function addFood (values, history) {
return function (dispatch) {
Axios.post(`${ROOT_URL}/myfoodlist/foods`, values)
.then( response => {
dispatch ({
type: ADD_NEW_FOOD,
payload: response
});
// history.push('/');
history.pushState(null, '/stockpile');
})
.catch( () => {
});
};
}