props.actions `undefined` when using redux and react.js

Question

I'm following a tutorial from this link: http://www.thegreatcodeadventure.com/react-redux-tutorial-part-ii-react-router-and-container-components/ But when the handleSubmit() function is fired i get an error:

TypeError: Cannot read property 'logInUser' of undefined

Indeed when i try to log this.props.actions it's undefined but i don't understand why. Is there something missing? I'm using Antd as UI framework.

Component

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) => {
    event.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        //console.log(this.props.actions);
        this.props.actions.logInUser(this.state.credentials);
      }
    });
  }


  render() {
    const { getFieldDecorator } = this.props.form;
    return (
        <Form onSubmit={this.handleSubmit} className="login-form">
        <FormItem>
          {getFieldDecorator('userName', {
            rules: [{ required: true, message: 'username missing!' }],
          })(
          <Input 
              name="username"
              value={this.state.credentials.username} 
              prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} 
              placeholder="Username o email"
              onChange={this.onChange}/>
          )}
        </FormItem>
        <FormItem>
          {getFieldDecorator('password', {
            rules: [{ required: true, message: 'Password missing!' }],
          })(
          <Input 
            name="password"
            value={this.state.credentials.password}
            prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} 
            type="password" 
            placeholder="Password"
            onChange={this.onChange}/>
          )}
        </FormItem>
        <FormItem>
          {getFieldDecorator('remember', {
              valuePropName: 'checked',
              initialValue: false,
            })(
              <Checkbox>Ricordami</Checkbox>
            )}
          <Button type="primary" htmlType="submit" className="login-form-button">
          Log in
          </Button>
        </FormItem>
        </Form>
    );
  }
}


const mapDispatchToProps = (dispatch) => {  
  return {
    actions: bindActionCreators(sessionActions, dispatch)
  };
}


export default Form.create()(Login);connect(null, mapDispatchToProps)(Login);

sessionReducer.js

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;
  }
}

sessionActions.js

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 => {
      sessionStorage.setItem('jwt', response.jwt);
      dispatch(loginSuccess());
    }).catch(error => {
      throw(error);
    });
  };
}

UPDATE I fixed the problem with the help of @Chaim Friedman but now i got another error:

Error: Actions must be plain objects. Use custom middleware for async actions.

But i'm using redux-thunk as middleware. Here's login function if it can helps:

sessionApi.js

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 => {
        console.log(response);
        return response.json();
      }),
      error => {
        console.log(error);
        return error;
      };
  }
}

Answer 1

I believe your trouble is with this line here.

export default Form.create()(Login);connect(null, mapDispatchToProps)(Login);

You are only exporting what Form.create() returns, so therefor your component is not actually connected to redux.

To fix this issue you would need to do something like this.

export default Form.create(connect(null, matchDispatchToProps)(Login));

The exact syntax made be different, it would depend on the usage of Form.create() , but this would be the basic idea.