title: I am having trouble with dispatching redux action from react Login component . I have tried to figure it out in vain
body: <p>I am trying to dispatch a loginAction to a redux store to update the store with the user details once a user logs in, but I am getting an error ... <strong>TypeError: Cannot read property 'props' of undefined</strong></p>
  <pre><code>import React, { Component } from 'react'
  import Navigation from '../components/Navigation';
  import {
      Form , Button
  } from 'react-bootstrap';
  import axios from  'axios';
  import { connect } from 'react-redux';
  import { getUser } from '../redux/actions';
  import store from '../redux/store'
  
  class Login extends Component {  
  
      handleLogin(e){
          e.preventDefault();        
          const email = document.getElementById('formEmail').value;
          const password = document.getElementById('formPassword').value;
          const user = { email, password};
  
          this.props.dispatch(getUser(user)) //here's where the problem is!           
         
          
      }
      render() {
          const { user } = this.props; 
  
          return (
              &lt;div className=&quot;bg-light&quot;&gt;
                  &lt;Navigation /&gt;
                  &lt;div className=&quot;container&quot;&gt;
                      &lt;div className=&quot;user-login-wrap&quot;&gt;
                          &lt;div className=&quot;user-icon&quot;&gt;
                              &lt;i className=&quot;fa fa-user&quot;&gt;&lt;/i&gt;
                          &lt;/div&gt;
                          &lt;div className=&quot;bg-white p-5 shadow-sm&quot;&gt;
                              &lt;h4 className=&quot;text-center&quot;&gt;Login&lt;/h4&gt;&lt;hr /&gt;
                              &lt;div className=&quot;p-3&quot;&gt;&lt;/div&gt;
                              &lt;Form&gt;
                                  &lt;Form.Group controlId=&quot;formEmail&quot;&gt;
                                      &lt;Form.Label&gt;Email address&lt;/Form.Label&gt;
                                      &lt;Form.Control type=&quot;email&quot; placeholder=&quot;Enter email&quot; /&gt;
                                      &lt;Form.Text className=&quot;text-muted&quot;&gt;
                                      We'll never share your email with anyone else.
                                      &lt;/Form.Text&gt;
                                  &lt;/Form.Group&gt;
  
                                  &lt;Form.Group controlId=&quot;formPassword&quot;&gt;
                                      &lt;Form.Label&gt;Password&lt;/Form.Label&gt;
                                      &lt;Form.Control type=&quot;password&quot; placeholder=&quot;Password&quot; /&gt;
                                  &lt;/Form.Group&gt;
                                  {/* &lt;Form.Group controlId=&quot;formBasicCheckbox&quot;&gt;
                                      &lt;Form.Check type=&quot;checkbox&quot; label=&quot;Check me out&quot; /&gt;
                                  &lt;/Form.Group&gt; */}
                                  &lt;Button variant=&quot;primary&quot; type=&quot;submit&quot; onClick={this.handleLogin}&gt;
                                      Submit
                                  &lt;/Button&gt;
                              &lt;/Form&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;                
              &lt;/div&gt;
          )
      }
  }
  
  const mapStateToProps = state =&gt; ({user : state.user})
  
  // const mapDispatchToProps = dispatch =&gt; ({
  //     getUser : actions.getUser
  // })
  
  export default connect( mapStateToProps, {getUser})(Login);
  </code></pre>
  <p>and here is my action.js file</p>
  <pre><code>import axios from 'axios';
  import { GET_USER, GET_USER_ERROR } from '../types';
  
  export const getUser = (user) =&gt; async dispatch =&gt; {
      // return console.log(user)
      try{
          const res = await axios.post(`http://localhost:8080/users/login`, user)       
          dispatch({
              type: GET_USER,
              payload: res.data
          })
      }
      catch(e){
          dispatch({
              type: GET_USER_ERROR,
              payload: console.log(e),
          })
      }
  
  }
  </code></pre>
  <p>And this is the error I get</p>
  <p><strong>TypeError: Cannot read property 'props' of undefined</strong></p>
  <p>I want to dispatch an actioon to the store so that the store gets updated ?</p>