title: using dispatch on react
body: <p>I am new to react and I'm trying to create a register and login page with react-redux and dispatch using the mern stack.</p>
  <p>When I am calling the method the function did not run.</p>
  <p>I have a file for the login page:</p>
  <pre><code>
      import React from &quot;react&quot;;
      import {login} from '../../actions/authActions';
      
      
      export class Login extends React.Component {
          
          constructor(props) {
              super(props);
          }
          
          checkIfElementIsEmpty = (element) =&gt; {
              if (!element) {
                  return false
              }
              if (element.value.length === 0)
              {
                  return false;
              }
              return true;
          }
      
          handleOnClickLogin = () =&gt;
          {
              let usernameElement = document.getElementsByName(&quot;loginUsername&quot;)[0];
              let passwordElement = document.getElementsByName(&quot;loginPassword&quot;)[0];
      
              if (!this.checkIfElementIsEmpty(usernameElement))
              {
                  usernameElement.style.backgroundColor = &quot;#ff000042&quot;;
                  return;
              }
              if (!this.checkIfElementIsEmpty(passwordElement))
              {
                  passwordElement.style.backgroundColor = &quot;#ff000042&quot;;
                  return;
              }
              console.log(&quot;asd&quot;);
              login(usernameElement.value, passwordElement.value);
          }
      
          setColorToDefault = (e) =&gt;{
              e.target.style.backgroundColor = &quot;#f3f3f3&quot;;
          }
      
          render() {
              return &lt;div className=&quot;base-container&quot; ref={this.props.containerRef}&gt;
                      &lt;div className=&quot;header&quot;&gt;Login&lt;/div&gt;
                      &lt;div className=&quot;content&quot;&gt;
                          &lt;div className=&quot;image&quot;&gt;
                              {/* &lt;img src={loginImg}/&gt; */}
                          &lt;/div&gt;
                          &lt;div className=&quot;form&quot;&gt;
                              &lt;div className=&quot;form-group&quot;&gt;
                                  &lt;label htmlFor=&quot;username&quot;&gt;Username:&lt;/label&gt;
                                  &lt;input type=&quot;text&quot; name=&quot;loginUsername&quot; placeholder=&quot;username&quot; onFocus={this.setColorToDefault}/&gt;
                              &lt;/div&gt;
                              &lt;div className=&quot;form-group&quot;&gt;
                                  &lt;label htmlFor=&quot;password&quot;&gt;Password:&lt;/label&gt;
                                  &lt;input type=&quot;password&quot; name=&quot;loginPassword&quot; placeholder=&quot;password&quot; onFocus={this.setColorToDefault}/&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div className=&quot;footer&quot;&gt;
                          &lt;button type=&quot;button&quot; className=&quot;btn&quot; onClick={this.handleOnClickLogin}&gt;
                              Login
                          &lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
          }
      }
  
  </code></pre>
  <p>and a file called &quot;authActions.js&quot; with the function &quot;login&quot; that should send the request to the server and validate the login.</p>
  <pre><code>
      export const login = (email, password) =&gt; (dispatch: Function) =&gt; {
          console.log(&quot;bbb&quot;);
          // Headers
          const config = {
              headers: {
                  'Content-Type': 'application/json',
                  'Access-Control-Allow-Origin': &quot;*&quot;
              }
          }
      
        // Request body
        const body = JSON.stringify({ email, password });
      
        axios
          .post('http://${HOST}:${PORT}/api/auth/login', body, config)
          .then(res =&gt;
            dispatch({
              type: LOGIN_SUCCESS,
              payload: res.data
            })
          )
          .catch(err =&gt; {
            dispatch(
              returnErrors(err.response.data, err.response.status, 'LOGIN_FAIL')
            );
            dispatch({
              type: LOGIN_FAIL
            });
          });
      }
  
  </code></pre>
  <p>When handleOnClickLogin is called, I only see the 'aaa' on the console. The 'bbb' is never being printed.
  Why this is happening and how I need to use dispatch and react-redux correctly?</p>