收到响应后，反应 onClick 删除调度不会发送第二个调度请求

Question

在一个组件中，我有一个按钮，onClick 调度一个 deleteQuestion 操作，该操作发送一个 fetch 后端删除请求，并且在收到响应时应该调用另一个操作来更新 Redux 存储。

但是，由于它是一个 onClick 事件，deleteQuestion thunk 函数不像从 ComponentWillMount 发出的传统调度请求那样工作，而是返回一个带有从未调用的调度参数的匿名函数。因此，我需要在 onClick 方法中同时调用两次调度，如下所示：

   handleDelete = () => {
    const { questionId } = this.props.match.params
    const { history } = this.props
    deleteQuestion(questionId, history)(deleteQuestion); //calling method twice
   }

虽然这种方法对于触发 Rails 后端的删除请求很有效，但当我收到响应时，我在 deleteQuestion 操作中嵌入的第二个调度函数——dispatch(removeQuestion(questionId))——不会触发更新 Redux 存储。我尝试在商店中放置多个调试器并检查控制台和终端是否有错误，但没有任何反应。

我已经阅读了 Redux 文档和其他在线资源，从我能够找到的内容来看，他们都说应该可以在 .then 请求中包含第二个调度调用。虽然可以在获取、发布和修补请求中执行此操作，但我无法弄清楚为什么它在删除请求中不起作用。

我打的电话是：

 export function deleteQuestion(questionId, routerHistory) {
   return (dispatch) => {
     fetch(`${API_URL}/questions/${questionId}`, {
       method: 'DELETE',
     }).then(res => {
       dispatch(removeQuestion(questionId))
     })
   }
 }  

github 是： https://github.com/jwolfe890/react_project1/blob/master/stumped-app-client/src/actions/questions.js

我真的很感激任何见解，因为我已经尝试通过这两天了！

Answer 1

您直接调用操作deleteQuestion，而不是让您的商店为您调度删除问题操作。相反，您应该从已映射到调度的道具中调用 deleteQuestion：

handleDelete = () => {
  const { questionId } = this.props.match.params
  const { history } = this.props
  this.props.deleteQuestion(questionId, history);
}

如果您以mapDispatchToProps 的形式传入一个对象，则每个元素都是调度调用。换句话说，您的mapDispatchToProps 相当于：

(dispatch) => ({ 
    deleteQuestion: (...params) => dispatch(deleteQuestion(...params)) 
})