title: Authentication React Redux Application
body: <p>Hello wonderful people at Stack overflow. I have a question that I've been trying to solve for the past few hours. For some it might be super basic,  but for me (a complete noob at Redux and React) it's like solving the Palestine conflict. However...</p>
  
  <p>In my React, Redux application I want the user to be able to log in. I don't know if I <strong>needed</strong> to add Redux to my React app when wanting to implement a login feature, but after watching a lot of videos and reading a bunch of stuff I was sure that I needed to do it (because it looks hardcore af yo).</p>
  
  <p>So, I'm using Redux-form to let the user type in email and password:</p>
  
  <h3>LoginForm.js:</h3>
  
  <pre><code>import React from 'react'
  import { Field, reduxForm } from 'redux-form'
  
  const LoginForm = ({ handleSubmit }) =&gt; {
    return (
      &lt;form onSubmit={handleSubmit}&gt;
        &lt;div&gt;
          &lt;label&gt;Email:&lt;/label&gt;
          &lt;Field name="email" component="input" type="text" /&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;label&gt;Lösenord:&lt;/label&gt;
          &lt;Field name="password" component="input" type="password" /&gt;
        &lt;/div&gt;
        &lt;button type="submit"&gt;Submit&lt;/button&gt;
      &lt;/form&gt;
    )
  }
  
  export default reduxForm({
    form: 'login'
  })(LoginForm)
  </code></pre>
  
  <p>Everything here works, because it's basically a ripoff from their docs hehe.. But! In my <strong>LoginContainer.js</strong> is where everything turns into cr*p:</p>
  
  <h3>LoginContainer.js:</h3>
  
  <pre><code>import React, { Component } from 'react'
  import { login } from '../../actions/login'
  import LoginForm from './Views/LoginForm'
  import { connect } from 'react-redux'
  
  class LoginContainer extends Component {
    submit(values) {
      this.props.login(values)
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;h1&gt;hejsan&lt;/h1&gt;
          &lt;LoginForm onSubmit={this.submit.bind(this)} /&gt;
        &lt;/div&gt;
      )
    }
  }
  
  function mapStateToProps(state) {
    return { auth: state.auth }
  }
  
  export default connect(mapStateToProps, login)(LoginContainer)
  </code></pre>
  
  <p>As you might see I'm importing an action called login (source code further down), I'm importing my form and the last part I'm little uncertain about. </p>
  
  <p>Here's my <strong>*login.js</strong>-action.</p>
  
  <h3>login.js:</h3>
  
  <pre><code>import axios from 'axios'
  import settings from '../settings'
  
  axios.defaults.baseURL = settings.hostname
  
  export const login = data =&gt; {
    return dispatch =&gt; {}
  }
  </code></pre>
  
  <p>Very cr*ppy action I know.</p>
  
  <p>But what I want to be able to do is; when I press the button I'd like to see a POST (404) request in my console. Sorry if this is a sh*tty question, and it's more like a cry for help by the way. But when you have been desperately been trying to make this work you'll start doing desperate things.</p>
  
  <p>Hopefully someone can guide me here, it will be greatly appreciated. Thanks for reading.</p>