Thunk Fetch is Undefined When Called from React Component

Question

I was playing around with a Thunk function called from a form submit, but had to stop because the fetch returns undefined inside the component and won't trigger .then(). I can't figure out why, I simplified the Thunk to its core, but still no luck. I have the same pattern with another form in the same app and it works smoothly. The backend answers correctly.

// actions/users.actions.js
export const login = (formData) => {
  return (dispatch) => {
    return fetch("http://localhost:3001/login", {
      method: "POST",
      headers: {"Content-Type": "application/json"},
      body: JSON.stringify(formData)
    }).then(res => res.json())
  }
}

// containers/LoginForm.js
import React, { Component } from 'react'
import { connect } from "react-redux";
import { Link } from 'react-router-dom'
import { login } from '../actions/users.actions'

class LoginForm extends Component {

    state = {
      username: '',
      password: ''
    }

    handleChange = (e) => {
      this.setState({
        ...this.state,
        [e.target.name]: e.target.value
      })
    }

    fetchOnSubmit = (e) => {
      e.preventDefault()
      this.props.login(this.state) 
//=> at this point it says TypeError: Cannot read property 'then' of undefined
        .then(res => this.props.errors ? null : this.props.history.push(`/`))
    }

    render() {
        return (
          <form onSubmit={this.fetchOnSubmit}>
            { this.props.alert.message &&
              <div className={`alert ${this.props.alert.type}`}>
                {this.props.alert.message.split('<b>').splice(0,1)}
                <b>{this.props.alert.message.split('<b>').splice(1,1)}</b>
              </div>
            }
            <h2 className='text-dark mb-4'>Login{'  '}
              {this.props.submitting && 
                <img alt="spinner" src="data:image/gif;...." />
              }
            </h2>
            <div>
              <fieldset className='ml-auto mr-auto w-100'>
                <label htmlFor="username" className="block">
                  Username*
                  <span className="text-red-400"></span>
                </label>
                <input
                  type="text"
                  name="username"
                  className='w-100 border border-primary shadow p-2 mb-4 rounded'
                  onChange={this.handleChange}>
                </input>
              </fieldset>
            </div>
            <div>
              <fieldset className='ml-auto mr-auto w-100'>
                <label htmlFor="password" className="block">
                  Password*
                  <span className="text-red-400"></span>
                </label>
                <input
                  type="password"
                  name="password"
                  className='w-100 border border-primary shadow p-2 mb-4 rounded-3 rounded'
                  onChange={this.handleChange}>
                </input>
              </fieldset>
            </div>
            <div class="row mb-5 ml-2 mr-2 mt-3">
                <div class="col-8 d-flex"><button className='h-1 border-0 rounded-pill ml-auto mr-auto' 
                  style={{width:'100%',display:'inline'}} type='Submit'>Login</button></div>
                <div class="col-4 d-flex">
                  <Link to="/Signup" className='ml-auto mr-auto mt-auto mb-auto text-primary hardlink'>Register</Link>
                </div>
            </div>
          </form>
        )
    }
}

const mapStateToProps = state => {
  return {
    submitting: state.sessions.submitting,
    alert: state.alert,
    errors: state.sessions.errors
  }
}

const mapDispatchToProps = dispatch => {
  return {
    login: (credentials) => {
      dispatch(login(credentials))
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(LoginForm);

How can I avoid to get the error TypeError: Cannot read property 'then' of undefined. I even tried to return a Promise from the action creator, but it doesn't work.

Answer 1

Issue

Looks like the anonymous function in your mapDispatchToProps is a void return. You declared a function scope and didn't return anything.

const mapDispatchToProps = dispatch => {
  return {
    login: (credentials) => {
      dispatch(login(credentials))
      // <-- nothing returned here
    }
  }
}

Solution

Return the dispatched action

const mapDispatchToProps = dispatch => {
  return {
    login: (credentials) => {
      return dispatch(login(credentials));
    }
  }
}

or use implicit arrow function return

const mapDispatchToProps = dispatch => {
  return {
    login: (credentials) => dispatch(login(credentials)),
  }
}

and since all action creators passed in a mapDispatchToProps are automatically wrapped in a call to dispatch you can write it even more succinctly as an object

const mapDispatchToProps = {
  login,
}