Реактивное состояние становится нулевым после использования избыточности

Question

У меня есть это приложение response-redux, все работало нормально, пока я не решил использовать redux для управления состоянием, тогда состояние реакции становится нулевым.

это моя страница входа, где я сталкиваюсь с проблемой :

class Login extends Component {
    constructor() {
        super();
        this.state = {
            email: '',
            password: '', 
        }

        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleChange = this.handleChange.bind(this);

    }


    handleSubmit = (event) => {
        event.preventDefault();

        let userData ={
            email: this.state.email,
            password: this.state.password
        }

        this.props.loginUser(userData, this.props.history);

    }

    handleChange = (event) => {
        this.setState({
            [event.target.name]:event.target.value
        });

    }


    render() {
        const { classes,  UI: { loading , errors  }} = this.props;
         //const {  } = this.state;
        return (
            <Grid container className={classes.form} spacing={10}>
                <Grid item sm />
                <Grid item sm >
                    <img src={AppIcon} alt="AppIcon" className={classes.image} />
                    <Typography variant="h3" className={classes.pageTitle}>
                        Login
                </Typography>
                    <form noValidate onSubmit={this.handleSubmit}>
                        <TextField id="email" name="email" type="email" label="Email" className={classes.textField} value={this.state.email} onChange={this.handleChange} fullWidth helperText={errors.email} error={ errors.email? true: false } />

                        <TextField id="password" name="password" type="password" label="Password" className={classes.textField} value={this.state.password} onChange={this.handleChange} fullWidth helperText={errors.password } error={ errors.password ? true: false } />

                        { errors.general && (
                            <Typography variant="body2" className={classes.customError} >
                                {errors.general}
                            </Typography>
                        )}

                        <Button type="submit" variant="contained" className={classes.button} color="primary" disabled={loading} > Log In  { loading && (<CircularProgress color="secondary" size={30} className={classes.progress} />) } </Button>

                    </form>
                    <small>
                         Dont have an account? sign up <Link to="/signup">here </Link> </small>
                </Grid>
                <Grid item sm />
            </Grid>
        )
    }
}

Login.propTypes = {
    classes: PropTypes.object.isRequired,
    loginUser: PropTypes.func.isRequired,
    user: PropTypes.object.isRequired,
    UI: PropTypes.object.isRequired
  };

  const mapStateToProps = (state) => ({
    user: state.user,
    UI: state.UI
  });


  const mapActionsToProps = {
    loginUser
  };

  export default connect(mapStateToProps, mapActionsToProps)(withStyles(styles)(Login));

, и я получаю следующее сообщение об ошибке:

TypeError: Cannot read property 'email' of null

        Login
  93 |                </Typography>
  94 |                    <form noValidate onSubmit={this.handleSubmit}>
> 95 |                        <TextField id="email" name="email" type="email" label="Email" className={classes.textField} value={this.state.email} onChange={this.handleChange} fullWidth helperText={errors.email} error={ errors.email? true: false } />
     | ^  96 | 
  97 |                        <TextField id="password" name="password" type="password" label="Password" className={classes.textField} value={this.state.password} onChange={this.handleChange} fullWidth helperText={errors.password } error={ errors.password ? true: false } />

Это начальное состояние пользователя из redux:

 const initialState = {
    authenticated: false,
    loading: false,
    credentials: {},
    likes: [],
    notifications: []
  };

и это начальное состояние пользовательского интерфейса :

 const initialState = {
    loading: false,
    errors: null
  };

Я не дал ему свойства электронной почты или пароля, потому что они находятся в состоянии входа в систему, но я получаю его как Null.