Question

我有一个组件会触发一个异步操作，该操作会启动API调用并返回Promise。如果我们只需要来自已完成承诺的数据，那么一切就简单了：

class ProgressBar extends React.Component {
  state = { progress: false };
  componentDidMount() {
    this.props.check().then((result) => {
      this.setState({ progress: result });
    })
  }
  render() {
    return (<div>Progress status: {this.state.progress}</div>);
  }
}

function mapDispatchToProps(dispatch) {
  return {
    check: bindActionCreators(CHECK_PROGRESS, dispatch)
  };
}

export default connect(null, mapDispatchToProps)(ProgressBar);

在中间件中：

case CHECK_PROGRESS: {
  return Promise.resolve(true);
}

现在，如果我有一个在后续调用中返回进度状态的API，我的中间件可能会变成这样（忽略可怕的样式，这可能是重试或诸如多步API调用之类的东西）：

case CHECK_PROGRESS: {
  return Promise.resolve(0.1)
    .then((result) => {
      // Report `result=0.1` back to component
      return Promise.resolve(0.5);
    })
    .then((result) => {
      // Report `result=0.5` back to component
      return Promise.resolve(0.7);
    })
    .then((result) => {
      // Report `result=0.7` back to component
      return Promise.resolve(1);
    });
}

很明显，仅在完成所有中间件步骤之后，处理.then的组件才会获得控制。对于此模式向组件发送正在进行的更新，什么是一个好的解决方案？第一个想法是

store.dispatch({type: PROGRESS_UPDATED, result}))

进入每个阶段，但是如果数据仅特定于此组件，那么使用全局存储似乎不是一个好习惯。添加callback自变量来执行操作是个好主意吗？

如何从正在进行的异步操作获取更新？

0 个答案: