Как сделать асинхронный запрос в redux с помощью Type Script?

Question

[Neuro]

Добрый день, не могу понять, в чём ошибка и что я делаю не так при запросе к серверу

spoiler

import * as constants from './../constants/index';
import { Dispatch } from 'react';
import Axios from 'axios';

export interface IgetApiData {
    type: constants.GET_API_DATA;
    data: any;
    loading: boolean;
}

export interface IpendingApiData {
    type: constants.PENDING_API_DATA;
    loading: boolean;
}

function setNewsDataFetch(data: string, loading: boolean): IgetApiData {
    return {
        type: constants.GET_API_DATA,
        data,
        loading
    }
}

function pendingNewsDataFetch(loading: boolean): IpendingApiData{
    return {
        type: constants.PENDING_API_DATA,
        loading
    }
}


export const getNewsDataFetch = () => (dispatch: Dispatch<IgetApiData | IpendingApiData>) = {
    dispatch(pendingNewsDataFetch(true))
    return (
        const fetchApiNews = await Axios.get(`https://api.dtf.ru/v1.6/news/default/recent?count=1`);
    )
}

может кто то знает решение?

Answer 1

[Антон Спирин]

1. Оператор await можно использовать только в асинхронных функциях
2. Блок return у вас не валидный.

interface FetchNewsDataSucceededAction {
  type: typeof FETCH_NEWS_DATA_SUCCEEDED;
  payload: News[];
}

interface FetchNewsDataFailedAction {
  type: typeof FETCH_NEWS_DATA_FAILED;
  payload: MappedError;
}

type NewsActionTypes = FetchNewsDataSucceededAction | 
  Action<typeof FETCH_NEWS_DATA_REQUEST> |
  FetchNewsDataFailedAction;

const fetchNewsDataRequest = (): NewsActionTypes => ({
  type: FETCH_NEWS_DATA_REQUEST,
});

const fetchNewsDataSucceeded = (payload: News[]): NewsActionTypes => ({
  type: FETCH_NEWS_DATA_SUCCEEDED,
  payload,
});

const fetchNewsDataFailed = (payload: MappedError): NewsActionTypes => ({
  type: FETCH_NEWS_DATA_FAILED,
  payload,
});

export const fetchNewsData = (): : ThunkAction<Promise<void>, {}, {}, AnyAction> => 
  async (dispatch: ThunkDispatch<{}, {}, NewsActionTypes>): Promise<void> => {
    try {
      const { data } = await Axios.get(`https://api.dtf.ru/v1.6/news/default/recent?count=1`);
      dispatch(fetchNewsDataSucceeded(data));
    } catch (error) {
      dispatch(fetchNewsDataFailed(mapAxiosError(error)));
    }
  };