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

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。 如果我用dispatch替换return ，那么它可以工作。 当我从api回调调度它时，为什么它不起作用？ 帮助将不胜感激！

Answer 1

您有此问题，因为fetchSuccess函数定义错误。 如果您仔细看一看，您会注意到调用fetchSucess(payload)返回一个箭头函数 ：

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

而dispatch接受一个对象，因此fetchSuccess函数必须返回一个action对象 ：

{
    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 ，而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))
     })
}