Предложения по реализации Redux с React.js

Это первый раз, когда я реализую сокращение для своего компонента, и я не могу с этим справиться, но я хотел бы знать, как это сделать.

Я уже добавил провайдера и хранилище в свой app.js, и я остановился, добавив редуктор, выборки и другие вещи для компонента react.js.

Это мой компонент React.js. Это простая панель входа, которая проверяет наличие логина и пароля в базе данных.

import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types';
import Helmet from 'react-helmet';
import classNames from 'classnames';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';

// Import Material UI
import { withStyles } from '@material-ui/core/styles';
import NavigateNext from '@material-ui/icons/NavigateNext';
import NavigateBefore from '@material-ui/icons/NavigateBefore';

// Import Services
import AuthService from 'services/AuthService';

// Import Components
import Header from 'components/Header';
import Subheading from 'components/Subheading';
import Notification from 'components/Notification';
import Footer from 'components/Footer';

// Import Internationalize
import { FormattedMessage } from 'react-intl';
import messages from './messages';


class LoginPage extends Component {
  constructor() {
    super();

    this.setState = {
      login: '',
      password: '',
      isLoginExist: false,
      loginError: '',
      passwordError: ''
    };

    this.handleChangeEvent = this.handleChangeEvent.bind(this);
    this.handleFormSubmitLogin = this.handleFormSubmitLogin.bind(this);
    this.handleFormSubmit = this.handleFormSubmit.bind(this);

    this.Auth = new AuthService();
  }

  componentWillMount() {
    if (this.Auth.loggedIn()) this.props.history.replace('/dashboard');
  }

  handleChangeEvent(e) {
    this.setState({
      [e.target.name]: e.target.value,
      passwordError: '',
      loginError: ''
    });
  }

  handleFormSubmitLogin(e) {
    e.preventDefault();

    this.Auth.isLogin(this.props.login)
      .then((res) => {
        if (res.isLogin) {
          this.setState({
            isLoginExist: true,
            loginError: '',
            password: ''
          });
        } else {
          this.setState({
            login: '',
            loginError: <FormattedMessage {...messages.loginError} />
          });
        }
      })
      .catch(() => {
        this.setState({
          loginError: <FormattedMessage {...messages.loginError} />
        });
      });
  };

  handleFormBack = () => {
    this.setState({
      isLoginExist: false,
      login: '',
      password: '',
      passwordError: ''
    });
  };

  handleFormSubmit(e) {
    e.preventDefault();

    this.Auth.login(this.props.login, this.props.password)
      .then((res) => {
        if (res) {
          this.props.history.replace('/dashboard');
        } else {
          this.setState({
            passwordError: <FormattedMessage {...messages.passwordError} />,
            password: ''
          });
        }
      })
      .catch(() => {
        this.setState({
          passwordError: <FormattedMessage {...messages.loginError} />
        });
      });
  }

  render() {
    console.info(this.props);

    const { classes } = this.props;
    const { isLoginExist, loginError, passwordError } = this.props;
    return (
      <Fragment>
        <FormattedMessage {...messages.helmetLoginTitle}>
          {(title) => <Helmet title = {title} />}
        </FormattedMessage>

        <Header />

        <FormattedMessage {...messages.loginToTheSystem}>
          {(title) => <Subheading headerText = {title} />}
        </FormattedMessage>

        <div className = {classes.pageContainer}>
          <Notification />
          <div className = {classes.formContainer}>
            <form noValidate onSubmit = {this.handleFormSubmit}>
              {!isLoginExist ? (
                <Fragment>
                  <div className = {classes.textField}>
                    <FormattedMessage {...messages.numberId} />
                  </div>
                  {[
                    <Fragment key = {1}>
                      <FormattedMessage {...messages.inputNumber}>
                        {(placeholder) => (
                          <input
                            className = {classNames(classes.formItem, {
                              [classes.formError]: loginError
                            })}
                            placeholder = {placeholder}
                            name = "login"
                            type = "number"
                            onChange = {this.handleChangeEvent}
                            onKeyPress = {(ev) => {
                              if (ev.key === 'Enter') {
                                ev.preventDefault();
                                this.handleFormSubmitLogin(ev);
                              }
                            }}
                          />
                        )}
                      </FormattedMessage>
                      {loginError ? (
                        <div className = {classes.textError}>{loginError}</div>
                      ) : null}
                    </Fragment>
                  ]}
                  <button
                    type = "button"
                    className = {classes.formSubmit}
                    onClick = {this.handleFormSubmitLogin}
                  >
                    <span className = {classes.buttonText}>
                      <FormattedMessage {...messages.nextText} />
                    </span>
                    <NavigateNext />
                  </button>
                </Fragment>
              ) : (
                <Fragment>
                  <div className = {classes.textField}>
                    <FormattedMessage {...messages.accessCode} />
                  </div>
                  {[
                    <Fragment key = {2}>
                      <FormattedMessage {...messages.inputPassowrd}>
                        {(placeholder) => (
                          <input
                            className = {classNames(classes.formItem, {
                              [classes.formError]: passwordError
                            })}
                            placeholder = {placeholder}
                            name = "password"
                            type = "password"
                            onChange = {this.handleChangeEvent}
                            onKeyPress = {(ev) => {
                              if (ev.key === 'Enter') {
                                ev.preventDefault();
                                this.handleFormSubmit(ev);
                              }
                            }}
                          />
                        )}
                      </FormattedMessage>
                      {passwordError ? (
                        <div className = {classes.textError}>{passwordError}</div>
                      ) : null}
                    </Fragment>
                  ]}
                  <button className = {classes.formSubmit} type = "submit">
                    <span className = {classes.buttonText}>
                      <FormattedMessage {...messages.inputLogin} />
                    </span>
                  </button>
                  <button type = "button" onClick = {this.handleFormBack}>
                    <NavigateBefore />
                    <span className = {classes.buttonText}>
                      <FormattedMessage {...messages.backText} />
                    </span>
                  </button>
                </Fragment>
              )}
              <br />
            </form>
          </div>
          <Footer />
        </div>
      </Fragment>
    );
  }
}

LoginPage.propTypes = {
  classes: PropTypes.object.isRequired,
  history: PropTypes.object.isRequired,
  replace: PropTypes.string
};

const mapStateToProps = (state) => ({
  login: state.login,
  password: state.password,
  isLoginExist: state.isLoginExist,
  loginError: state.loginError,
  passwordError: state.passwordError
});

export default withStyles(styles)(
  withRouter(connect(mapStateToProps)(LoginPage))
);