React Component not updating after adding new value in store - reactjs

Question

So I am using react, redux and firebase for this small crud app, whenever a new employee is created I redirect to the home component which should display all the employees created including the new one. But the new employee isn't showing up after redirection from create employee. What seems to be the issue, essentially I want is for the Home component to update with the new data.
Home.js
import React, { Component } from 'react'
import { connect } from 'react-redux'
import EmployeesList from '../employees/EmployeesList'
import { firestoreConnect } from 'react-redux-firebase'
import { compose } from 'redux'
class Home extends Component {
render() {
const { employees } = this.props
return (
<div>
<EmployeesList employees={employees} />
</div>
)
}
}
const mapStateToProps = (state) => {
// console.log(state)
return ({
employees: state.firestore.ordered.employees
})
}
export default compose(
connect(mapStateToProps),
firestoreConnect([
{ collection: 'employees', orderBy: ['createdAt', 'desc'] }
])
)(Home)
CreateEmployee.js
import React, { Component } from 'react'
import { compose } from 'redux'
import { connect } from 'react-redux'
import { withRouter } from "react-router";
import { createEmployee } from '../../store/actions/employeeActions'
import { withStyles } from '#material-ui/core/styles';
import Button from '#material-ui/core/Button';
import TextField from '#material-ui/core/TextField';
import Typography from '#material-ui/core/Typography';
const styles = theme => ({
bt_create: {
margin: theme.spacing.unit,
padding: '10'
},
input: {
display: 'none',
},
});
class CreateEmployee extends Component {
state = {
name: '',
email: '',
department: '',
salary: ''
}
handleChange = e => {
this.setState({
[e.target.id]: e.target.value
})
}
handleSubmit = e => {
e.preventDefault()
// console.log(this.state)
// TODO store state data in db
this.props.createEmployee(this.state)
this.props.history.push({
pathname: '/'
})
}
render() {
return (
<div>
<br />
<Typography variant="h6" color="inherit">
Create new employee
</Typography>
<form onSubmit={this.handleSubmit}>
<TextField
id="name"
label="Name"
defaultValue=""
margin="normal"
onChange={this.handleChange}
/>
<br />
<TextField
id="email"
label="Email"
defaultValue=""
margin="normal"
onChange={this.handleChange}
/>
<br />
<TextField
id="department"
label="Department"
defaultValue=""
margin="normal"
onChange={this.handleChange}
/>
<br />
<TextField
id="salary"
label="Salary"
defaultValue=""
margin="normal"
onChange={this.handleChange}
/>
<br />
<br />
<Button type="submit" variant="contained" color="primary" className="bt_create">Create</Button>
</form>
</div>
)
}
}
const mapDispatchToProps = dispatch => {
return {
createEmployee: (employee) => dispatch(createEmployee(employee))
}
}
export default compose(
withStyles(styles),
withRouter,
connect(null, mapDispatchToProps)
)(CreateEmployee)
Create employee action
export const createEmployee = employee => {
return (dispatch, getState, { getFirebase, getFirestore }) => {
const firestore = getFirestore()
// TODO add employee here
firestore.collection('employees').add({
...employee,
createdAt: new Date(),
updatedAt: new Date()
}).then(() => {
dispatch({
type: 'CREATE_EMPLOYEE_SUCCESS',
employee: employee
})
}).catch((err) => {
dispatch({ type: 'CREATE_EMPLOYEE_ERROR', err })
})
}