title: validation on signup if the user already exists in the database using react redux express
body: <p>So, as the title suggests, I am trying to find if the user exists or not. Here's what I have done until now. I'm having trouble with handling validation in the <code>handleSubmit</code> function.</p>
  
  <p><strong>RegistrationForm.js</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import React, { Component } from "react"
  import { registerUser, checkValidUser } from "../actions/userActions"
  import { connect } from "react-redux"
  import validator from "validator"
  import { Link } from "react-router-dom"
  
  class RegistrationForm extends Component {
    constructor(props) {
      super(props)
      this.state = {
        username: "",
        email: "",
        password: "",
      }
    }
  
    handleChange = (event) =&gt; {
      const { name, value } = event.target
      this.setState({
        [name]: value,
      })
    }
  
    handleSubmit = (event) =&gt; {
      event.preventDefault()
      const { username, email, password } = this.state
  
      const registrationData = this.state
  
      if (!username || !email || !password) {
        return toastError("Credentials should not be empty")
      }
  
      if (username.length &lt; 6) {
        return toastError("Username should be greater than 6 characters.")
      }
  
      if (!validator.isEmail(email)) {
        return toastError("Invalid email.")
      }
  
      if (password.length &lt; 6) {
        return toastError("Password must contain 6 characters.")
      }
  
      this.props.dispatch(checkValidUser(email)) // how do i properly handle validations here
  
      this.props.dispatch(
        registerUser(registrationData, () =&gt; this.props.history.push("/login"))
      )
    }
  
    render() {
      const isRegistrationInProgress = this.props.registration.isRegistrationInProgress
      return (
        &lt;div&gt;
          &lt;div className="field"&gt;
            &lt;p className="control has-icons-left has-icons-right"&gt;
              &lt;input
                onChange={this.handleChange}
                name="username"
                value={this.state.username}
                className="input"
                type="text"
                placeholder="Username"
              /&gt;
              &lt;span className="icon is-small is-left"&gt;
                &lt;i className="fas fa-user"&gt;&lt;/i&gt;
              &lt;/span&gt;
            &lt;/p&gt;
          &lt;/div&gt;
          &lt;div className="field"&gt;
            &lt;p className="control has-icons-left has-icons-right"&gt;
              &lt;input
                onChange={this.handleChange}
                name="email"
                value={this.state.email}
                className="input"
                type="email"
                placeholder="Email"
              /&gt;
              &lt;span className="icon is-small is-left"&gt;
                &lt;i className="fas fa-envelope"&gt;&lt;/i&gt;
              &lt;/span&gt;
            &lt;/p&gt;
          &lt;/div&gt;
          &lt;div className="field"&gt;
            &lt;p className="control has-icons-left"&gt;
              &lt;input
                onChange={this.handleChange}
                name="password"
                value={this.state.password}
                className="input"
                type="password"
                placeholder="Password"
              /&gt;
              &lt;span className="icon is-small is-left"&gt;
                &lt;i className="fas fa-lock"&gt;&lt;/i&gt;
              &lt;/span&gt;
            &lt;/p&gt;
          &lt;/div&gt;
          &lt;div className="field"&gt;
            &lt;div className="control"&gt;
              {isRegistrationInProgress ? (
                &lt;button className="button is-success is-loading"&gt;Sign Up&lt;/button&gt;
              ) : (
                &lt;button onClick={this.handleSubmit} className="button is-success"&gt;
                  Sign up
                &lt;/button&gt;
              )}
              &lt;Link to="/login"&gt;
                &lt;p className="has-text-danger"&gt;
                  Already have an account? Sign In
                &lt;/p&gt;
              &lt;/Link&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      )
    }
  }
  
  const mapStateToProps = (state) =&gt; {
    return state
  }
  
  export default connect(mapStateToProps)(RegistrationForm)
  </code></pre>
  
  <p><strong>checkValidUser action creator</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>export const checkValidUser = (email) =&gt; {
    return async dispatch =&gt; {
      dispatch({ type: "CHECK_VALID_USER_STARTS" })
      try {
        const res = await axios.get(`${baseUrl}/users/checkValidUser/${email}`)
        dispatch({
          type: "CHECK_VALID_USER_SUCCESS",
          data: { message: res.data.message } 
        })
      } catch (err) {
        dispatch({
          type: "CHECK_VALID_USER_ERROR",
          data: { error: "Something went wrong" },
        })
      }
    }
  }
  </code></pre>
  
  <p><strong>route</strong>- <code>router.get("/checkValidUser/:email", usersController.checkValidUser)</code></p>
  
  <p><strong>checkValidUser controller function</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>  checkValidUser: async (req, res, next) =&gt; {
      const { email } = req.params
      try {
        const user = await User.findOne({ email })
        if (!user) {
          return res.status(404).json({ error: "No user found" })
        }
        return res.status(200).json({ message: "User already exists" })
      } catch (error) {
        return next(error)
      }
    }
  </code></pre>
  
  <p><strong>registration reducer</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>const initialState = {
    isRegistrationInProgress: false,
    isRegistered: false,
    registrationError: null,
    user: {},
    message: "",
  }
  
  const registration = (state = initialState, action) =&gt; {
    switch (action.type) {
      case "REGISTRATION_STARTS":
        return {
          ...state,
          isRegistrationInProgress: true,
          registrationError: null,
        }
  
      case "REGISTRATION_SUCCESS":
        return {
          ...state,
          isRegistrationInProgress: false,
          registrationError: null,
          isRegistered: true,
          user: action.data,
        }
  
      case "REGISTRATION_ERROR":
        return {
          ...state,
          isRegistrationInProgress: false,
          registrationError: action.data.error,
          isRegistered: false,
          user: {},
        }
      case "CHECK_VALID_USER_STARTS":
        return {
          ...state,
          isRegistrationInProgress: true,
        }
      case "CHECK_VALID_USER_SUCCESS":
        return {
          ...state,
          isRegistrationInProgress: false,
          message: action.data.message,
        }
      case "CHECK_VALID_USER_ERROR":
        return {
          ...state,
          registrationError: action.data.error,
        }
  
      default:
        return state
    }
  }
  
  export default registration
  </code></pre>
  
  <p>Any help would be appreciated. Thanks.</p>