How do put axios in axios and get the data out in this case?
export const fetchPeoplesAction = (page = 1) => {
return async (dispatch) => {
dispatch(setIsFetching(true));
const {data: {results}} = await axios.get(`/api/people/?page=${page}`);
const peoplesMap = results.map(({name, url, homeworld}) => {
const id = getId(url); // 1
const homeworldId = getId(homeworld); //2
const img = getImg(id) // https://img.jpg
//Issue:
//How do I get data here if axios is asynchronous? How can I make it asynchronous
//code and combine data to send to redux?
axios.get(`/api/planets/${homeworldId}`).then(({data}) =>{
const planetName = data.name; //PlanetName
//Here I get the data in console.log and can form an object, but it doesn't work - the
//code is asynchronous
console.log(id, name, img, planetName)
// 1, Luke, https://img.jpg, Tatoine
})
})
Here I need to get an array of objects like:
peoples Array : [ {id: 1, name: Luke, img: https//img.jpg, planetName: Tatoine}, ...etc object map]
//The combined data goes to redux where it is processed on the client
dispatch(setStarPeople(peoples));
};
};