Question

我希望能够从我的组件中调用this.prop.getComicByName（＆＃39; IronMan＆＃39;）。为此，我需要将两个异步操作链接在一起。第一个获取钢铁侠的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的新手，所以我在这里可能完全错了。如何正确链接我的异步调用？

Answer 1

我也是redux的新手，但我注意到你没有从第一个动作返回结果，你只是在调度动作。您是否尝试从第一次异步操作返回结果？

＆＃13;

<div id="app">
  <myform @newdata="handleData($event)"></myform>
  <p>name: {{ user.name }}</p>
  <p>age: {{ user.age }}</p>
</div>

new Vue({
  el: '#app',
  data: {
    user: { name: '', age: 0 }
  },
  methods: {
    handleData: function(e) {
      [this.user.name, this.user.age] = e;
    }
  },
  components: {
    'myform': {
      template: `
      <div>
      <input type="text" v-model="formData.name" placeholder="Your name">
      <input type="number" v-model.number="formData.age">
      </div>`,
      data: function() {
        return { formData: { name: '', age: 0 } }
      },
      watch: {
        formData: {
            handler: function() {
              this.$emit('newdata', [this.formData.name, this.formData.age]);
          },
            deep: true
        }
      }
    }
  }
});

＆＃13;

链接Redux异步操作

1 个答案: