I want to be able to call this.prop.getComicByName('IronMan') from my component. To do this, I need to chain two async actions together. 1st to grab the ID of Iron Man then use that ID to look up which comics it exists in.
I have implemented the following 2 redux thunk functions. I have also implemented the combined function based on Github chain action example
export function getIdByName(name) {
console.log('getIdByName Thunk Action')
return dispatch => {
const FIELD = '/characters'
let encodedName = encodeURIComponent(name.trim());
let searchUrl = ROOT_URL + FIELD + '?ts=' + TS + '&apikey=' + PUBLIC_KEY + '&hash=' + HASH + '&name=' + encodedName;
return axios.get(searchUrl)
.then(result => {
console.log('test 151', result)
dispatch({
type: GET_ID_BY_NAME_SUCCESS,
payload: result
})
})
}
}
export function getComicById(id) {
console.log('getComicById Thunk Action')
return dispatch => {
const FIELD = '/comics'
let searchUrl = ROOT_URL + FIELD + '?ts=' + TS + '&apikey=' + PUBLIC_KEY + '&hash=' + HASH + '&characters=' + id;
return axios.get(searchUrl)
.then(result => {
console.log('125', result)
dispatch({
type: GET_COMIC_BY_ID_SUCCESS,
payload: result
})
})
}
}
// combined function
export function getComicsByName(name) {
console.log('getComicByName Thunk Action')
// Again, Redux Thunk will inject dispatch here.
return (dispatch, getState) => {
dispatch({
type: GET_COMIC_LIST_START
})
return dispatch(getIdByName(name))
.then(result => {
console.log('result', result) // this gives me undefined........
var id = result.payload.data.data.results[0].id
return dispatch(getComicById(id))
})
.catch(err => {
dispatch({
type: GET_COMIC_LIST_FAILED,
errorFound: err
})
})
}
}
As shown in the output, I was able to get the ID successfully after calling this.props.getComicsByName() function in my component However, the result after the .then clause (marked in the combined function) gives me undefined. I have followed the exact process of the github link on chaining Async calls. I believe I am not chaining it correctly though as in my case I am trying to use the data passed back by the 1st async call (And the github example didnt)
I am new to Redux so I might be completely wrong here. How can I properly chain my async calls?

getIdByNameaction Axios does not return any data in the first place (because console.log('test 151', result) logs only test 151). Check if the server returns the data at all.