app\static\js\components\auth\Register(1).jsx

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import agent from '../../agent'
import { connect } from 'react-redux'

const mapStateToProps = state => ({ ...state.auth });

const mapDispatchToProps = dispatch => ({
    onChangeEmail: value =>
        dispatch({type: 'UPDATE_FIELD_AUTH', key: 'email', value}),
    onChangeUsername: value =>
        dispatch({type: 'UPDATE_FIELD_AUTH', key: 'username', value}),
    onChangePassword: value =>
        dispatch({type: 'UPDATE_FIELD_AUTH', key: 'password', value}),
    onChangePassword2: value =>
        dispatch({type: 'UPDATE_FIELD_AUTH', key: 'password2', value}),
    onSubmit: (email, username, password, password2) => {
        const payload = agent.Auth.register(email, username, password, password2);
        dispatch({type: 'REGISTER', payload})
    }
});

class Register extends Component {
    constructor() {
        super();
        this.changeEmail = event => this.props.onChangeEmail(event.target.value);
        this.changeUsername = event => this.props.onChangeUsername(event.target.value);
        this.changePassword = event => this.props.onChangePassword(event.target.value);
        this.changePassword2 = event => this.props.onChangePassword2(event.target.value);
        this.submitForm = (email, username, password, password2) => event => {
            event.preventDefault();
            this.props.onSubmit(email, username, password, password2);
        }
    }

    render() {
        const {email, username, password, password2} = this.props;

        return (
            <div className="auth-page">
                <div className="container">
                    <div className="row">
                        <div className="col-md-6 offset-md-3 col-xs-12">

                            <h1 className="text-xs-center">Sign Up</h1>
                            <p className="text-xs-center">
                                <Link to="login">
                                    Have an Account?
                                </Link>
                            </p>

                            <form onSubmit={this.submitForm(email, username, password, password2)}>
                                <fieldset>

                                    <fieldset className="form-group">
                                        <input
                                            className="form-control form-control-lg"
                                            type="email"
                                            placeholder="Email"
                                            value={this.props.email || ""}
                                            onChange={this.changeEmail}/>
                                    </fieldset>

                                    <fieldset className="form-group">
                                        <input
                                            className="form-control form-control-lg"
                                            type="text"
                                            placeholder="Username"
                                            value={this.props.username || ""}
                                            onChange={this.changeUsername}/>
                                    </fieldset>

                                    <fieldset className="form-group">
                                        <input
                                            className="form-control form-control-lg"
                                            type="password"
                                            placeholder="Password"
                                            value={this.props.password || ""}
                                            onChange={this.changePassword}/>
                                    </fieldset>

                                    <fieldset className="form-group">
                                        <input
                                            className="form-control form-control-lg"
                                            type="password"
                                            placeholder="Your Password Again"
                                            value={this.props.password2 || ""}
                                            onChange={this.changePassword2}/>
                                    </fieldset>

                                    <button
                                        className="btn btn-lg btn-primary pull-xs-right"
                                        type="submit"
                                        disabled={this.props.inProgress}>
                                        Sign Up
                                    </button>

                                </fieldset>
                            </form>
                        </div>

                    </div>
                </div>
            </div>
        );
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Register);