title: props.actions `undefined` when using redux and react.js
body: <p>I'm following a tutorial from this link: <a href="http://www.thegreatcodeadventure.com/react-redux-tutorial-part-ii-react-router-and-container-components/" rel="nofollow noreferrer">http://www.thegreatcodeadventure.com/react-redux-tutorial-part-ii-react-router-and-container-components/</a>
  But when the <code>handleSubmit()</code> function is fired i get an error:</p>
  
  <blockquote>
    <p>TypeError: Cannot read property 'logInUser' of undefined</p>
  </blockquote>
  
  <p>Indeed when i try to log <code>this.props.actions</code> it's undefined but i don't understand why. Is there something missing?
  I'm using Antd as UI framework.</p>
  
  <p><strong>Component</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import { Form, Icon, Input, Button, Checkbox } from 'antd';
  import {bindActionCreators} from 'redux';  
  import {connect} from 'react-redux';  
  import * as sessionActions from './actions/sessionActions';
  
  const FormItem = Form.Item;
  
  class Login extends Component {
    constructor(props){
      super(props);
      this.state = {credentials: {username: '', password: ''}};
      this.handleSubmit = this.handleSubmit.bind(this);
      this.onChange = this.onChange.bind(this);
    }
  
    onChange(event) {
      const field = event.target.name;
      const credentials = this.state.credentials;
      credentials[field] = event.target.value;;
      return this.setState({credentials: credentials});
    }
  
    handleSubmit = (event) =&gt; {
      event.preventDefault();
      this.props.form.validateFields((err, values) =&gt; {
        if (!err) {
          //console.log(this.props.actions);
          this.props.actions.logInUser(this.state.credentials);
        }
      });
    }
  
  
    render() {
      const { getFieldDecorator } = this.props.form;
      return (
          &lt;Form onSubmit={this.handleSubmit} className="login-form"&gt;
          &lt;FormItem&gt;
            {getFieldDecorator('userName', {
              rules: [{ required: true, message: 'username missing!' }],
            })(
            &lt;Input 
                name="username"
                value={this.state.credentials.username} 
                prefix={&lt;Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} /&gt;} 
                placeholder="Username o email"
                onChange={this.onChange}/&gt;
            )}
          &lt;/FormItem&gt;
          &lt;FormItem&gt;
            {getFieldDecorator('password', {
              rules: [{ required: true, message: 'Password missing!' }],
            })(
            &lt;Input 
              name="password"
              value={this.state.credentials.password}
              prefix={&lt;Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} /&gt;} 
              type="password" 
              placeholder="Password"
              onChange={this.onChange}/&gt;
            )}
          &lt;/FormItem&gt;
          &lt;FormItem&gt;
            {getFieldDecorator('remember', {
                valuePropName: 'checked',
                initialValue: false,
              })(
                &lt;Checkbox&gt;Ricordami&lt;/Checkbox&gt;
              )}
            &lt;Button type="primary" htmlType="submit" className="login-form-button"&gt;
            Log in
            &lt;/Button&gt;
          &lt;/FormItem&gt;
          &lt;/Form&gt;
      );
    }
  }
  
  
  const mapDispatchToProps = (dispatch) =&gt; {  
    return {
      actions: bindActionCreators(sessionActions, dispatch)
    };
  }
  
  
  export default Form.create()(Login);connect(null, mapDispatchToProps)(Login);
  </code></pre>
  
  <p><strong>sessionReducer.js</strong></p>
  
  <pre><code>import * as types from '../actions/actionTypes';  
  import initialState from './initialState';  
  
  export default function sessionReducer(state = initialState.session, action) {  
    switch(action.type) {
      case types.LOG_IN_SUCCESS:
        this.context.history.push('/')
        return !!sessionStorage.jwt
      default: 
        return state;
    }
  }
  </code></pre>
  
  <p><strong>sessionActions.js</strong></p>
  
  <pre><code>import * as types from './actionTypes';  
  import sessionApi from '../api/sessionApi';
  
  export function loginSuccess() {  
    return {type: types.LOG_IN_SUCCESS}
  }
  
  export function logInUser(credentials) {  
    return function(dispatch) {
      return sessionApi.login(credentials).then(response =&gt; {
        sessionStorage.setItem('jwt', response.jwt);
        dispatch(loginSuccess());
      }).catch(error =&gt; {
        throw(error);
      });
    };
  }
  </code></pre>
  
  <p><strong>UPDATE</strong>
  I fixed the problem with the help of @Chaim Friedman but now i got another error:</p>
  
  <blockquote>
    <p>Error: Actions must be plain objects. Use custom middleware for async actions.</p>
  </blockquote>
  
  <p>But i'm using redux-thunk as middleware. Here's login function if it can helps:</p>
  
  <p><strong>sessionApi.js</strong></p>
  
  <pre><code>import React from 'react'
  
  var axios = require('axios');
  var qs = require('qs');
  
  class SessionApi {  
  
    static login(credentials){
      axios.post('http://localhost:5000/login', qs.stringify({auth: credentials}))
        .then(response =&gt; {
          console.log(response);
          return response.json();
        }),
        error =&gt; {
          console.log(error);
          return error;
        };
    }
  }
  </code></pre>