Я играл с функцией Thunk, вызываемой из отправки формы, но мне пришлось остановиться, потому что выборка возвращает undefined внутри компонента и не запускает .then (). Я не могу понять почему, я упростил Thunk до его ядра, но все равно не повезло. У меня такой же шаблон с другой формой в том же приложении, и он работает плавно. Бэкэнд отвечает правильно.

// 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: ''
    }

    handleChangeEvent = (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.handleChangeEvent}>
                </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.handleChangeEvent}>
                </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);

Как мне избежать появления ошибки TypeError: Cannot read property 'then' of undefined. Я даже пытался вернуть обещание от создателя действия, но это не сработало.