Show messages on the basis of API response in React.js

Question

I have installed React using create-react-app. I am submitting form using onSubmit() function. On submitting form from LoginRegister.js Component, below is my LoginRegister.js file code:

import React from 'react'; 
import DefaultLayout from '../Layout/DefaultLayout';
import PropTypes from 'prop-types';
import { connect } from 'react-redux'; 
import { userSignupRequest } from '../actions/signupActions';



class LoginRegister extends React.Component {
    constructor(props) {
    super(props);
        this.state = {first_name: '',last_name: '',email:'',password:'',c_password:'', phone_no:'',user_role:2, errmsg:''};
        //this.state = {about: ''};

        this.handleInputChange = this.handleInputChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }
    

    handleInputChange(event) {
        this.setState({ [event.target.name]: event.target.value});
      }

    handleSubmit(event) {
        event.preventDefault();
        this.props.userSignupRequest(this.state);
    }   
    
    render(){
        return (
            <DefaultLayout>
                <section id="page-title">

                    <div className="container clearfix">
                        <h1>My Account</h1>
                        <ol className="breadcrumb">
                            <li><a href="/">Home</a></li>
                            <li><a href="/">Pages</a></li>
                            <li className="active">Login</li>
                        </ol>
                    </div>

                </section>

                <section id="content">

                    <div className="content-wrap">

                        <div className="container clearfix">
                            <div className="col_two_third col_last nobottommargin">


                                <h3>Dont have an Account? Register Now.</h3>

                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, vel odio non dicta provident sint ex autem mollitia dolorem illum repellat ipsum aliquid illo similique sapiente fugiat minus ratione.</p>
                                <p id="msg">{this.state.errmsg}</p>
                                <form id="register-form" name="register-form" className="nobottommargin" method="post" onSubmit={this.handleSubmit}>

                                    <div className="col_half">
                                        <label htmlFor="register-form-name">First Name:</label>
                                        <input type="text" id="register-form-firstname" name="first_name" value={this.state.first_name} className="form-control" onChange={this.handleInputChange} />
                                    </div>
                                    
                                    <div className="col_half col_last">
                                        <label htmlFor="register-form-email">Last name:</label>
                                        <input type="text" id="register-form-lastname" name="last_name" value={this.state.last_name} className="form-control" onChange={this.handleInputChange} required={true} />
                                    </div>

                                    <div className="clear"></div>

                                    <div className="col_half">
                                        <label htmlFor="register-form-email">Email Address:</label>
                                        <input type="text" id="register-form-email" name="email" value={this.state.email} className="form-control" onChange={this.handleInputChange} required={true} />
                                    </div>
                                    
                                    <div className="col_half col_last">
                                        <label htmlFor="register-form-repassword">Phone no.:</label>
                                        <input type="text" id="register-form-phone" name="phone_no" value={this.state.phone_no} className="form-control" onChange={this.handleInputChange} />
                                    </div>

                                    <div className="clear"></div>

                                    <div className="col_half">
                                        <label htmlFor="register-form-password">Choose Password:</label>
                                        <input type="password" id="register-form-password" name="password" value={this.state.password} className="form-control" onChange={this.handleInputChange} />
                                    </div>

                                    <div className="col_half col_last">
                                        <label htmlFor="register-form-repassword">Re-enter Password:</label>
                                        <input type="password" id="register-form-repassword" name="c_password" value={this.state.c_password} className="form-control" onChange={this.handleInputChange} />
                                    </div>
                                    <input type="hidden" name="user_role" value={this.state.user_role} className="form-control" />  
                                    <div className="clear"></div>

                                    <div className="col_full nobottommargin">
                                        <button className="button button-3d button-black nomargin" id="reg-submit" name="register-form-submit" value="register">Register Now</button>
                                    </div>

                                </form>

                            </div>

                        </div>

                    </div>
                </section>
                
            </DefaultLayout>
        )
    }
}

LoginRegister.propTypes = {
    userSignupRequest: PropTypes.func.isRequired    
}

export default connect((state) => { return{} }, {userSignupRequest} ) (LoginRegister); 

And action/signupActions file have below code, that calling API and handling response using Reducer:

import axios from 'axios'; 

export function userSignupRequest(userData){
        return dispatch => {
            dispatch({"type":"CALL_START"});
            axios.post('../user/register', userData).then(response => {
              dispatch({"type":"RECEIVE_RESPONSE", "payload":response.data});
            }).catch(error => {
                dispatch({"type":"RECEIVE_ERROR", "payload":error});
            });
        }
        
    }

Reducer.js has the below code:

const reducer = (state={}, action) => {
    switch(action.type){
        case "CALL_START" :{
            alert("Hi1");
            return {}
            break;  
        }
        case "RECEIVE_RESPONSE" : {
            //return {...state, data:action.payload}
            alert("Hi2");
            return {data:action.payload}
            break;
        }
        case "RECEIVE_ERROR" : {
            alert("Hi3");
            alert(JSON.stringify(action.payload));
            return {data:action.payload}
            break;
        }
        
    }   
    
}   

export default reducer;

API is calling and I am getting response properly. How can I show success/error message on my 'LoginRegister.js' component on the basis of the response?

Answer 1

So I will suggest yo uto make a few changes

1. When you use connect then you should probably connect the action to dispatch or directly call it in the component by not providing the second parameter to connect

2. get the state in your component. For this you can make use of mapStateToProps

3. You would probably want to display a proper message on Register, you can do that form the userSignupRequest action .

change your code to the below

UserSignUpRequest actions

import axios from 'axios'; 

export function userSignupRequest(userData){
        return dispatch => {
            dispatch({"type":"CALL_START"});
            axios.post('../user/register', userData).then(response => {
              dispatch({"type":"RECEIVE_RESPONSE", "payload":"Successfully Registered"});
            }).catch(error => {
                dispatch({"type":"RECEIVE_ERROR", "payload":"Error Registering " +  JSON.stringify(error)});
            });
        }

    }

LoginRegister

import {bindActionCreators} form 'redux';
class LoginRegister extends React.Component {
    constructor(props) {
    super(props);
        this.state = {first_name: '',last_name: '',email:'',password:'',c_password:'', phone_no:'',user_role:2, errmsg:''};
        //this.state = {about: ''};

        this.handleInputChange = this.handleInputChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }


    handleInputChange(event) {
        this.setState({ [event.target.name]: event.target.value});
      }

    handleSubmit(event) {
        event.preventDefault();
        this.props.userSignupRequest({...this.state})
    }   

    render(){
        console.log(this.props.registerMessage)
        return (
            <DefaultLayout>
                <section id="page-title">

                    <div className="container clearfix">
                        <h1>My Account</h1>
                        <ol className="breadcrumb">
                            <li><a href="/">Home</a></li>
                            <li><a href="/">Pages</a></li>
                            <li className="active">Login</li>
                        </ol>
                    </div>

                </section>

                <section id="content">

                    <div className="content-wrap">

                        <div className="container clearfix">
                            <div className="col_two_third col_last nobottommargin">


                                <h3>Dont have an Account? Register Now.</h3>

                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, vel odio non dicta provident sint ex autem mollitia dolorem illum repellat ipsum aliquid illo similique sapiente fugiat minus ratione.</p>
                                <p id="msg">{this.props.registerMessage}</p>
                                <form id="register-form" name="register-form" className="nobottommargin" method="post" onSubmit={this.handleSubmit}>

                                    <div className="col_half">
                                        <label htmlFor="register-form-name">First Name:</label>
                                        <input type="text" id="register-form-firstname" name="first_name" value={this.state.first_name} className="form-control" onChange={this.handleInputChange} />
                                    </div>

                                    <div className="col_half col_last">
                                        <label htmlFor="register-form-email">Last name:</label>
                                        <input type="text" id="register-form-lastname" name="last_name" value={this.state.last_name} className="form-control" onChange={this.handleInputChange} required={true} />
                                    </div>

                                    <div className="clear"></div>

                                    <div className="col_half">
                                        <label htmlFor="register-form-email">Email Address:</label>
                                        <input type="text" id="register-form-email" name="email" value={this.state.email} className="form-control" onChange={this.handleInputChange} required={true} />
                                    </div>

                                    <div className="col_half col_last">
                                        <label htmlFor="register-form-repassword">Phone no.:</label>
                                        <input type="text" id="register-form-phone" name="phone_no" value={this.state.phone_no} className="form-control" onChange={this.handleInputChange} />
                                    </div>

                                    <div className="clear"></div>

                                    <div className="col_half">
                                        <label htmlFor="register-form-password">Choose Password:</label>
                                        <input type="password" id="register-form-password" name="password" value={this.state.password} className="form-control" onChange={this.handleInputChange} />
                                    </div>

                                    <div className="col_half col_last">
                                        <label htmlFor="register-form-repassword">Re-enter Password:</label>
                                        <input type="password" id="register-form-repassword" name="c_password" value={this.state.c_password} className="form-control" onChange={this.handleInputChange} />
                                    </div>
                                    <input type="hidden" name="user_role" value={this.state.user_role} className="form-control" />  
                                    <div className="clear"></div>

                                    <div className="col_full nobottommargin">
                                        <button className="button button-3d button-black nomargin" id="reg-submit" name="register-form-submit" value="register">Register Now</button>
                                    </div>

                                </form>

                            </div>

                        </div>

                    </div>
                </section>

            </DefaultLayout>
        )
    }
}


function mapStateToProps(state){
      return { 
         registerMessage: state.data
      }
}
function mapDispatchToProps(dispatch) {
      return bindActionCreators({userSignupRequest: userSignupRequest}, dispatch)
}
export default connect(mapStateToProps, mapDispatchToProps ) (LoginRegister);

Reducer

const initialState = { 
    data: '',
    status: ''
}
const reducer = (state=initialState, action) => {
switch(action.type){
case "CALL_START" :{
alert("Hi1");
return {}
break; 
}
case "RECEIVE_RESPONSE" : {
//return {...state, data:action.payload}
return {...state, data:action.payload}
break;
}
case "RECEIVE_ERROR" : {
alert(JSON.stringify(action.payload));
return { ...state, data:action.payload}
break;
}
default: {
return state
}
} 

} 

export default reducer;

Answer 2

But here I don't know how to show success/error message on my 'LoginRegister.js' component on th basis of response

Subscribe to the state using @connect.

More

• http://redux.js.org/docs/basics/UsageWithReact.html