How to make multiple API calls within React Native and Reflux

Web Technologies Web Development 3 years ago

4.51K 1 0 0 0

_x000D_ _x000D_ I am following Indrik Lasn's React/Reflux/Thunk tutorial in React Native Training and having a hard time editing the code to allow for chained API calls. Tutorial Link: https://medium.com/react-native-training/learn-how-to-build-a-rn-redux-cryptocurrency-app-chapter-iii-a454dda156b How do I chain multiple API calls from coinmarketcap.com's API? This is the code I thought would work. Developer tools shows the data is coming in for the 2 API calls but once the 2nd API loads into the browser, it replaces the data from the 1st API data within the view? import axios from 'axios'; import { apiBaseURL } from './../Utils/Constants'; import { FETCHING_COIN_DATA, FETCHING_COIN_DATA_SUCCESS, FETCHING_COIN_DATA_FAIL } from './../Utils/ActionTypes'; export default function FetchCoinData() { return dispatch => { dispatch({ type: FETCHING_COIN_DATA }) axios.get(`${apiBaseURL}/v1/ticker/bitcoin`) .then(res => dispatch({ type: FETCHING_COIN_DATA_SUCCESS, payload: res.data })) .then(() => axios.get(`${apiBaseURL}/v1/ticker/litecoin`)) .then(res => dispatch({ type: FETCHING_COIN_DATA_SUCCESS, payload: res.data })) .catch(err => { dispatch({ type: FETCHING_COIN_DATA_FAIL, payload: err.data }) }); } }

User submissions are the sole responsibility of contributors, with TuteeHUB disclaiming liability for accuracy, copyrights, or consequences of use; content is for informational purposes only and not professional advice.

Answers (1)

Post Answer
profilepic.png
manpreet Tuteehub forum best answer Best Answer 3 years ago
_x000D_ async componentDidMount() { const firstRequest = await axios.get('https://maps.googleapis.com/maps/api/geocode/json?&address=' + this.props.p1); const secondRequest = await axios.get('https://maps.googleapis.com/maps/api/geocode/json?&address=' + this.props.p2); const thirdRequest = await axios.get('https://maps.googleapis.com/maps/api/directions/json?origin=place_id:' + firstRequest.data.results.place_id + '&destination=place_id:' + secondRequest.data.results.place_id + '&key=' + 'API-KEY-HIDDEN'); this.setState({ p1Location: firstRequest.data, p2Location: SecondRequest.data, route: thirdRequest.data, }); }
0 views
0 shares

No matter what stage you're at in your education or career, TuteeHUB will help you reach the next level that you're aiming for. Simply,Choose a subject/topic and get started in self-paced practice sessions to improve your knowledge and scores.

Similar Forum


Q

Unity hosting a custom piece of code on own website [on hold]

_x000D_ _x000D_ I was wondering how would you be able to host an "API" on your own website that you...
Q

I am needing advice on a web bot [on hold]

_x000D_ _x000D_ I want to code a bot that has a GUI or CLI doesn't really matter yet but a GUI would...
Q

date and time picker, that can take a max and min absolute time, compatible with react [on hold]

_x000D_ _x000D_ I have an issue with scheduling things in a web platform (react.js), and need a date...

Important Web Technologies Links