1

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
                })
            })
    }
}

console

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?

1
  • Looks like in your getIdByName action 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. Commented Apr 28, 2017 at 11:35

1 Answer 1

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 <=============
            })            
    }
}

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.