Вызывайте API каждые 3 секунды в реаги-редуксе

Question

Я пытаюсь вызвать API непрерывно с интервалом в 3 секунды. Я пытаюсь с async и setInterval, но не работает вообще.Давайте посмотрим на мой код ниже

component.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { connect } from 'react-redux';
import { fetchMarketCap } from '../Actions/Marketcap';

class Header extends Component{
    componentDidMount(){
        setInterval(this.props.fetchMarketCap(), 3000);
    }
    render(){
        const marketcap = this.props.marketcap.map(coin => (
                <div key={coin.CoinInfo.Id}>
                    <h5>{coin.CoinInfo.Name}</h5>
                    <h5>{coin.RAW.USD.CHANGE24HOUR}</h5>
                </div>
        ));
        return (
            <div>
                {marketcap}
            </div>

        );
    }
}
const mapStateToProps = state => ({
    marketcap: state.marketcap.coins
});
export default connect ( mapStateToProps, { fetchMarketCap } )(Header);

и файл ожидаемого действия Marketcap.js

import { FETCH_MARKET_CAP, FETCH_MARKET_CAP_SUCCEED, FETCH_MARKET_CAP_FAILED } from './Types';

export const fetchMarketCap = async () => async dispatch => {
    const res = await fetch('https://min-api.cryptocompare.com/data/top/mktcapfull?limit=10&tsym=USD&api_key=46e898b0b5d0319ab6fb94aae5ed2f1a388ff650bffefa1f32f5af1479766b4f');
    const response = await res.json()
        .then( marketcaps => 
            dispatch({
                type: FETCH_MARKET_CAP_SUCCEED,
                payload: marketcaps.Data
            })
        )
}

, но в консоли SyntaxError: Unexpected token (10:52) in Marketcap.js.Unexpected token (10:52) You may need an appropriate loader to handle this file type. в консоли.Как я могу решить это?

Answer 1

То, как я делал это в прошлом, используя промежуточное ПО Redux-Sagas.Он позволяет вам опрашивать каждые x секунд, а также позволяет запускать и останавливать опрос с помощью действий.

Подробнее см. В этом ответе: https://stackoverflow.com/a/52422831/6640093

Answer 2

Одна очевидная вещь - это использование ключевого слова async ... Избавьтесь от первого async, например, так:

export const fetchMarketCap = () => async dispatch => {
    const res = await fetch('https://min-api.cryptocompare.com/data/top/mktcapfull?limit=10&tsym=USD&api_key=46e898b0b5d0319ab6fb94aae5ed2f1a388ff650bffefa1f32f5af1479766b4f');
    const response = await res.json()
        .then( marketcaps => 
            dispatch({
                type: FETCH_MARKET_CAP_SUCCEED,
                payload: marketcaps.Data
            })
        )
}