阻塞一个 thunk 的异步请求答案

【问题标题】：Blocking in a thunk'd async request阻塞一个 thunk 的异步请求
【发布时间】：2017-11-01 20:06:57
【问题描述】：

我有一个提交处理程序触发动作创建者以在 reactjs 中发出异步请求：

handleTimeSubmit = () => {
  // ...
  this.props.emitTimeRequest(arg1, guid);
  // setInterval should go here after checking response
}

动作创建者应该收到一个 202 和一个轮询位置，然后：

export function emitTimeRequest(arg1, guid) {
  const URI = '/someplace';
  var config = {
    headers: {'X-Request-ID': guid}
  };
  return function (dispatch) {
    axios.post(URI, arg1, config)
    .then((response) => {
      if ( response.status === 202 ) {
        var timeID = setInterval(() => {
          dispatch(emitCheckTimeStatus(response.headers['content-location']));
        }, 1000);
        return {
          type: EMIT_TIME_SLICE_REQ_OK,
          payload: timeID
        }
      } else {
        dispatch(emitTxRxAlert("red", "server timeslice error " + response.status));
        return {
          type: EMIT_TIME_SLICE_REQ_NA,
          payload: response.status
        }
      }
    })
  };
}

但是setInterval 不属于动作创建者（我在控制台中收到很多警告）。如果我把它放在提交处理程序中，动作创建函数在从服务器接收到响应之前将控制权返回给调用者，我不想在提交处理程序中放置一些 kludgy 计时器来强制它等待。比赛条件。

有什么方法可以强制动作创建者（上面的emitTimeRequest）阻止，直到它收到 202？ setInterval 应该在哪里实现？

一切正常，emitCheckTimeStatus 完成了它的工作并清除了timeID。

【问题讨论】：

标签： reactjs react-redux axios redux-thunk

【解决方案1】：

将相关组件的所有计时器逻辑移至componentWillMount()。一切就绪。

【讨论】：