Thunk Action Body not being Invoked

Question

My thunk action doesn't seem to be running through its core logic. I tall the thunk action from componentDidMount but it doesn't in turn cause this to run: const response = await findOne(id).

Also, I thought I didn't need to explicitely pass dispatch as a prop to mapDispatchToProps if using redux-thunk, I thought that the way I have my thunk setup is that dispatch is available already to the thunk? And I've used other actions like this and it's worked fine, why not this one?

Thunk Action

export function fetchCompany(id) {
  return async (dispatch) => {

    try {
      const response = await findOne(id)

      if(response && response.body) {
        const company = response.body
        dispatch(companyReceived(company))
      }
    } catch(err) {
      console.log("failed request in authenticate thunk action")
      console.log(`error details: ${err.status} /n ${err}`)
    }
  }
}

Container ......

import { fetchCompany } from '../../client/actions/company/CompanyAsyncActions'

class InterviewContainer extends Component {
  async componentDidMount() {
    await fetchCompany(this.props.params.companyId)
  }

  render(){
    return (this.props.company && <Interview className='ft-interview' company={this.props.company} />)
  }
}

const mapStateToProps = state => ({
  company: state.company.company
})

const mapDispatchToProps = {
  fetchCompany: fetchCompany
}

export default connect(mapStateToProps, mapDispatchToProps)(InterviewContainer)

In the past, I haven't passed (dispatch) as a prop to mapDispatchToProps and it worked fine. But I see everyone else is doing so. How was my code working in the past if I wasn't doing that? And why isn't this working this time around in the example above?

Taking a look at another async action thunk container and call example, this is working completely fine, and I'm calling it the same way in another container

container

class HomePageContainer extends Component {
  constructor(){
    super()
  }

  async componentDidMount() {
    await this.props.fetchFeaturedCompanies()
    await this.props.fetchCompanies()
    await this.props.fetchCountries()
  }

  render(){
    return (<HomePage className='ft-homepage'
                      featuredCompanies={this.props.featuredCompanies}
                      countries={this.props.countries}
                      companies={this.props.companies}
    />)
  }
}

const mapStateToProps = state => ({
  countries: state.country.countries,
  companies: state.company.companies,
  featuredCompanies: state.company.featuredCompanies
})

const mapDispatchToProps = {
  fetchCountries: fetchCountries,
  fetchCompanies: fetchCompanies,
  fetchFeaturedCompanies: fetchFeaturedCompanies
}

export default connect(mapStateToProps, mapDispatchToProps)(HomePageContainer)

thunk action

export function fetchCompanies() {
  return async (dispatch, getState) => {
    const response = await find()

    if(response && response.body) {
      const companies = response.body
      dispatch(companiesReceived(companies))
    }
  }
}

Answer 1

In componentDidMount of InterviewContainer you're accidentally calling the imported fetchCompany, instead of this.props.fetchCompany.