在存储中添加新值后，React Component不更新

Question

因此，我正在为这个小型Crud应用程序使用react，redux和firebase，每当创建新员工时，我都会重定向到home组件，该组件应显示所有创建的员工，包括新员工。但是从创建雇员重定向后，新雇员没有出现。看来是什么问题，本质上我想让Home组件使用新数据进行更新。

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)

创建员工行动

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 })
        })
    }