F
F
frolldoll2018-03-18 18:54:41
API
frolldoll, 2018-03-18 18:54:41

How to get third party api on React Redux?

Do I need to make a server to get the api of a third-party service and then send it to a promise on the REACT frontend.
I tried to do the following without a server, my action receives data in payload like this -

import request from 'superagent'

export const fetchCryptos = async () =>{ 
    const { body } = await request.get('https://api.bitfinex.com/v2/tickers?symbols=tBTCUSD,tLTCUSD')
    return body.cryptos
   
}

And then after processing in the reducer, I display it as follows -
import React, { Component } from 'react'
import { connect } from 'react-redux'

import { fetchCryptos } from 'actions'
import { getCryptos } from 'selectors'

class Cryptos extends Component {
    componentDidMount() {
        this.props.fetchCryptos()
    }
    renderCrypto(obj,index){
            return(
                <div key={index} className='col-md-1'><a href="#" className="badge badge-success"><h3>{obj.name}</h3> {obj.price}$</a></div>
            )}
    
    render() {
        const { cryptos } = this.props
        return (
            
            <div>
                <div className='books row'>
                    {cryptos.map((obj,index)=>this.renderCrypto(obj,index))}
                </div>
            </div>
        )
    }
}

const mapStateToProps = state => ({
cryptos: getCryptos(state)
})

const mapDispatchToProps = {
    fetchCryptos
}

export default connect(mapStateToProps, mapDispatchToProps)(Cryptos)

But It doesn't work in any way, FETCH_FAILURE error! But if the request is made not to the service, but to the mock data, for example,
export default [
    {
        id: "1",
        categoryId: "1",
        name: "BTC",
    },
    {
        id: "2",
        categoryId: "1",
        name: "ETH",
    },
But here you see how it is structured, although that may not be the case.
What should I do guys , I'm sitting on the second day and I don't understand, by the way, if I upload mock data to mocky.io and make api, then again everything is bad and it does not accept them. xs is this a simple question or a difficult one, I'll put "simple"

Answer the question

In order to leave comments, you need to log in

2 answer(s)
R
Roman Aleksandrovich, 2018-03-18
@frolldoll

I usually use either fetch or axios for requests. I advise you to try axios, but first install postman and check if the api works (otherwise you wrote a request, you get an error, and it’s not clear if the api works)
https://github.com/axios/axios documentation

R
Ruslan Absalyamov, 2018-03-18
@rusline18

Use axios it is similar to ajax

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question