Как получить сторонний api на React Redux?

Question

[frolldoll]

Нужно ли делать сервак что бы получать api стороннего сервиса и потом отправлять в promise на фронтенде REACT .
Я пробовал без сервака сделать следующие , action у меня получает данные в payload вот так -

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
   
}

А потом после обработки в редьюсере отображаю следующим образом -

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)

Но Это не работает никак , ошибка FETCH_FAILURE ! Но вот если запрос делать не к сервису а к моковым данным например таким

export default [
    {
        id: "1",
        categoryId: "1",
        name: "BTC",
    },
    {
        id: "2",
        categoryId: "1",
        name: "ETH",
    },

Но тут видите как оно структурировано , хотя может не в этом дело .
Что мне делать ребят , я сижу второй день и не понимаю , кст если я моковые данные закину на mocky.io и сделаю api , то опять все плохо и он их не принимает . хз простой это или сложный вопрос , поставлю "простой"

Answer 1

[Роман Александрович]

я обычно для запросов использую или fetch или axios. Советую папробовать axios но с начала установите postman и проверьте работает ли api (а то вы написали запрос у вас прилетает еррор а работает ли апи не понятно)
https://github.com/axios/axios документация

Comments

[frolldoll]

C postman не работал , но уже скачал по вашему совету , а как проверить через него api ???

[Роман Александрович]

frolldoll, найдите на youtube видео если не понятно
но там вроде бы все просто
указывайте метод get post и тд
потом url вставляете
а ниже перечисляете параметры если они есть
если будет не понятно покажите ваш запрос и покажите скрин помогу чем смогу

[frolldoll]

Роман Александрович, Братка что то я ничего не понял, так что ли?

[Роман Александрович]

frolldoll,

[Роман Александрович]

frolldoll, вопщем апи работает
можете писать свой запрос спокойно

[frolldoll]

Роман Александрович, Аахах , спасибо ,вот я туплю ,
Тк вот я сделал запрос таким образом, к другому сервису (там json лучше выглядит)

export const fetchCryptos = async () =>{ 
    request.get("https://api.coinmarketcap.com/v1/ticker/?limit=10").then(res => console.log("response", res.body))

так после это вылазит в консоли это
я так понял все норм и нужно дописать res => (вместо console.log что нужно написать ??? return res.body или body.cryptos как было раньше и как это должно выглядеть?

[Роман Александрович]

frolldoll,
давайте вы установите axios
и сделаете запрос в компоненте прямо в функции ComponentDidMount а затем уже вынесете её куда угодно
axios хороший инструмент для запросов думаю рано или поздно придется на него пересесть)))

[Роман Александрович]

frolldoll, вам нужно написать dispatch и положить данные в редукс

export const GET_CRYPTOS= 'GET_CRYPTOS'

export const fetchCryptos = async () =>{ 
    request.get("https://api.coinmarketcap.com/v1/ticker/?limit=10")
.then(res =>  dispatch({
            type: GET_CRYPTOS, payload: res.body})
        })
)

[frolldoll]

Роман Александрович, Друг я щас буду читать доки по axios , в componentDidMount запрос сделать не получиться у меня вся структура приложение испортиться или нет смотря что ты имеешь ввиду там же типа сейчас this.props.fetchCryptos() - функция action ,ну это ладно мне так удобнее , а как мне с этим щас сделать , я просто второй день с ошибкой сижу и не вижу результата , в action у меня вот так -

export const fetchCryptos = () => async dispatch => {
 dispatch({type:FETCH_CRYPTOS_START})

 try {
    const result = fetchCryptosApi()
    dispatch({
        type: FETCH_CRYPTOS_SUCCESS,
        payload:result
    })
 } catch (error) {
     console.log('error', error)
     dispatch({
         type:FETCH_CRYPTOS_FAIL,
         payload:error,
         error: true
     })
 }
}

а в запросе к api вот так

export const fetchCryptos = async () => {
    request.get("https://api.coinmarketcap.com/v1/ticker/?limit=10").then(res =>

И я не понимаю что писать после res=>{}

[frolldoll]

return request.get("https://api.coinmarketcap.com/v1/ticker/?limit=10").then(res => console.log("response", res.body))

@RomReed, или вот так?

[frolldoll]

Роман Александрович, А сорян я не увидел твой ответ ,все понял

[Роман Александрович]

frolldoll, замечательно
делайте dispatch
импортируйте данные в компоненте и выводите их

[frolldoll]

Роман Александрович, А вот это GET_CRYPTOS это сейчас у меня я так понимаю FETCH_CRYPTOS_SUCCESS , оно у меня и в редьюсерах такой никнэйм, все правильно?

[Роман Александрович]

frolldoll,

А вот это GET_CRYPTOS это сейчас у меня я так понимаю FETCH_CRYPTOS_SUCCESS

да

[frolldoll]

Я правильно сдалал ?)

[Роман Александрович]

frolldoll, нет))
в ComponentDidMount должен быть вызов функции которую вы импортируете из экшена

[frolldoll]

Роман Александрович, АХАХАХХАХАХ еееее ,все робит , Даже не знаю что бы я нахер без тебя делал мужик

[Роман Александрович]

frolldoll, хаха ) бурная реакция
удачи

[frolldoll]

Роман Александрович, Кст а если я хочу делать запрос каждые 10сек , это где setInterval устанавливать надо ?

[Роман Александрович]

frolldoll, да
setInterval(()=>ваша функция, 10000);

[frolldoll]

Роман Александрович, Я понял брат ) а где ? на action сам или при вызове его ?

[Роман Александрович]

frolldoll, я бы повесил в компоненте в componentDidMount

Answer 2

[Руслан Абсалямов]

Используй axios он аналогичен ajax