Действия Redux больше не работают после преобразования в TypeScript

Question

Я изо всех сил старался преобразовать существующий код в TS. Но теперь по какой-то причине мои вызовы для получения исходных данных больше не работают после переноса моего кода на TS.

HomePageContainer.tsx

class HomePageContainer extends Component<{
    featuredCompanies: Array<Company>,
    companies: Array<Company>,
    countries: Array<Country>
}, any> {
    async componentDidMount() {
        console.log('got here');
        await fetchFeaturedCompanies();
        console.log('got here');
        await fetchCompanies();
        await fetchCountries();
    }

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

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

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

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

Он получает console.logs для 'got here', а также fetchFeaturedCompanies, но это все.

CompanyAsyncActions.ts Итак, он попадает сюда и регистрирует 'fetchFeaturedCompanies'. Но если я попытаюсь добавить console.log внутрь async (dispatch: any) => {, он не попадет в него

export function fetchFeaturedCompanies() {
 console.log('fetchFeaturedCompanies');
 return async (dispatch: any) => {
  const response: any = await findFeatured();
  if (response && response.body) {
   const featuredCompanies = response.body;
   dispatch(featuredCompaniesReceived(featuredCompanies));
  }
 };
}

Я не знаю, есть ли что-то TS'i sh для redux, которое мне нужно сделать, или я испортил свои определения TS, или что ... на самом деле тоже нет ошибок.

Сервер expressjs определенно работает. api.ts (также был преобразован в TS)

const _ = require('lodash'),
 companyTable = require('../shared/data/companies.json'),
 countryTable = require('../shared/data/countries.json'),
 compression = require('compression'),
 express = require('express'),
 historyApi = require('connect-history-api-fallback'),
 oneYear = 31536000;

module.exports = express()
 .use(compression())
 .on('error', (err: string) => {
  console.log(err);
 })
 .get('/api/v1/countries', (_req: any, res: any) => {
  res.json(countryTable.map((country: any) => _.pick(country, ['id', 'name', 'images'])));
 })
 .get('/api/v1/companies', (_req: any, res: any) => {
  res.json(
   companyTable.map((company: any) =>
    _.pick(company, [
     'id',
     'active',
     'images',
     'locations',
     'name',
     'new',
     'notInterviewed',
     'interview.apprenticeships.hasApprenticeship',
    ])
   )
  );
 })
 .get('/api/v1/companies/featured', (_req: any, res: any) => {
  console.log('get /api/v1/companies/featured');
  const companies = companyTable.filter((company: any) => company.featured.active);

  if (companies) {
   console.log('requesting companies from json');
   res.json(companies);
  } else {
   res.status(404).send('requested featured companies do not exist.');
  }
 })
 .get('/api/v1/companies/:companyId', (req: any, res: any) => {
  const company = companyTable.filter((company: any) => company.id === parseInt(req.params.companyId, 10))[0];

  if (company) {
   res.json(company);
  } else {
   res.status(404).send('The requested company does not exist.');
  }
 })
 .use(historyApi())
 .use(
  express.static('dist', {
   maxage: oneYear,
  })
 )
 .use((_req: any, res: any) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Credentials', true);
  res.header('Access-Control-Allow-Methods', 'GET,OPTIONS');
  res.header(
   'Access-Control-Allow-Headers',
   'Origin,X-Requested-With,Content-Type,Accept,content-type,application/json'
  );
  res.send('Sorry, Page Not Found');
 });

ОБНОВЛЕНИЕ - по предложению Михала

lass HomePageContainer extends Component<{
    featuredCompanies: Array<Company>,
    companies: Array<Company>,
    countries: Array<Country>,
    fetchFeaturedCompanies: any,
    fetchCompanies: any,
    fetchCountries: any
}, any> {
    async componentDidMount() {
        console.log('got here');
        await this.props.fetchFeaturedCompanies();
        console.log('got here');
        await this.props.fetchCompanies();
        await this.props.fetchCountries();
    }

Answer 1

Вам все равно нужно отправлять действия Redux в компонентах React, используя this.props

  async componentDidMount() {
        console.log('got here');
        await this.props.fetchFeaturedCompanies();
        console.log('got here');
        await this.props.fetchCompanies();
        await this.props.fetchCountries();
    }

, и помещать их в типы свойств, чтобы Typescript скомпилировался.