Question

我有一种情况，我在api调用成功后调度一个动作。

axios.get(url)
       .then(response => {
         console.log("RESPONDED", response, dispatch)
         const payload = response
         dispatch(fetchSucess(payload))
       })

fetchSucess的代码段：

const fetchSucess = (payload) => (dispatch) => {
  console.log("FETCH SUCCESS HAPPENED", payload)
  return {
    type: someActionTypes.FETCH_ALL_SUCCESS,
    payload,
  }
}

现在奇怪的是，未触发FETCH_ALL_SUCCESS。如果我将return替换为dispatch，则它可以工作。当我从api回调调度它时，为什么它不起作用？帮助将不胜感激！

Answer 1

您遇到此问题是因为fetchSuccess函数定义错误。如果您仔细看一下，您会发现调用fetchSucess(payload)会返回箭头功能：

(dispatch) => {
  console.log("FETCH SUCCESS HAPPENED", payload)
  return {
    type: someActionTypes.FETCH_ALL_SUCCESS,
    payload,
  }
}

dispatch接受一个对象时，fetchSuccess函数必须返回一个动作对象：

{
    type: someActionTypes.FETCH_ALL_SUCCESS,
    payload,
}

这就是fetchSuccess函数应类似于此的原因：

const fetchSucess = (payload) => {
  console.log("FETCH SUCCESS HAPPENED", payload)
  return {
    type: someActionTypes.FETCH_ALL_SUCCESS,
    payload,
  }
}

Answer 2

看一下代码片段，我假设您使用的是redux-thunk中间件（您可能忘记提到了吗？）。在这种情况下，以下方法是正确的方法。这里，fetchData是一个重击，fetchSuccess是一个动作。

const fetchSuccess = (payload) => ({
  type: someActionTypes.FETCH_ALL_SUCCESS,
  payload
})

const fetchData = () => (dispatch) => {
  axios.get(url)
     .then(response => {
       console.log("RESPONDED", response, dispatch)
       dispatch(fetchSuccess(response))
     })
}

React＆Redux：调度动作不起作用

2 个答案: