Chaining Redux Async Actions

Question

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?

Answer 1

I'm also new to redux, but I noticed you are not returning the result from the first action, you're only dispatching an action. Did u try returning the result from the first async action?

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
                })
                return result.data ; // add this <=============
            })            
    }
}