链接 Redux 异步操作答案

【问题标题】：Chaining Redux Async Actions链接 Redux 异步操作
【发布时间】：2017-09-26 11:41:03
【问题描述】：

我希望能够从我的组件中调用 this.prop.getComicByName('IronMan')。为此，我需要将两个异步操作链接在一起。首先获取钢铁侠的ID，然后使用该ID查找它存在于哪些漫画中。

我已经实现了以下 2 个 redux thunk 函数。我也实现了基于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
                })
            })
    }
}

如输出所示，在我的组件中调用 this.props.getComicsByName() 函数后，我能够成功获取 ID 但是，.then 子句（在组合函数中标记）之后的结果给了我未定义的结果。我遵循了链接异步调用的 github 链接的确切过程。我相信我没有正确链接它，但在我的情况下，我试图使用第一个异步调用传回的数据（而 github 示例没有）

我是 Redux 的新手，所以我在这里可能完全错了。如何正确链接我的异步调用？

【问题讨论】：

看起来在您的getIdByName 操作中，Axios 首先不返回任何数据（因为 console.log('test 151', result) 仅记录测试 151）。检查服务器是否返回数据。

标签： reactjs redux react-redux redux-thunk

【解决方案1】：

我也是 redux 的新手，但我注意到您没有返回第一个操作的结果，您只是分派了一个操作。您是否尝试从第一个异步操作返回结果？

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

【讨论】：