Question

假设我有这些Flux动作;

{
  "type": "USER_LOADED",
  "payload": { ... }
}

{
  "type": "USER_LOAD_FAILED",
  "payload": { ... }
}

{
  "type": "SHOW_ERROR_MODAL",
  "payload": { ... }
}

{
  "type": "HIDE_ERROR_MODAL"
}

我有UserStore（听取USER_LOADED和USER_LOAD_FAILED并相应更新）和ModalStore（听取SHOW_ERROR_MODAL并更新相应地）。

我有一个Modal组件，该组件始终显示在页面上，从ModalStore呈现内容。

在USER_LOAD_FAILED出现时，显示错误模式的最佳方法是什么？应该ModalStore听一听吗？我最终将采用许多不同类型的*_LOAD_FAILED动作，这是一个好主意吗？

我无法从UserStore发送回USER_LOAD_FAILED，因为您无法在发送期间发送。

我可以从一些“控制器”组件调度，它在这些方面做了一些事情;

class UserController extends PureComponent {
  constructor(...args) {
    super(...args);

    this.state = { error: null, notified: false };
  }

  componentDidMount = () => this.props.flux.store('UserStore').on('change', this.onUserChange)

  componentDidUpdate = () => {
    if (this.state.error && !this.state.notified) {
      this.props.flux.actions.showErrorModal(this.state.error);

      this.setState({ notified: true });
    }
  }

  componentWillUnmount = () => this.props.flux.store('UserStore').off('change', this.onUserChange)

  onUserChange = () => {
    const userStore = this.props.flux.store('UserStore');

    // UserStore#getError() returns the most recent error which occurred (from USER_LOAD_FAILED).
    const error = userStore.getError();

    this.setState({ error, notified: error !== this.state.error });
  }

  render = () => ...
}

但我觉得这只是一种解决方法而不是实际解决方案。

我想到的最后一种方法是在最初发送SHOW_ERROR_MODAL的动作创建者中发送USER_LOAD_FAILED，但我仍然不知道这是否是“建议”方式，因为你最终可能会为其他案件提供大量逻辑。

Answer 1

如果您使用Promises进行API调用，如果您在解析或拒绝函数中调度操作，则在当前调度期间不会触发它。

回调的情况也是如此。当您的解决/拒绝/回调函数执行时，您的原始发送将完成。

话虽如此，我不确定为什么你选择让你的模态组件由商店驱动。在显示模态之前，您是在进行任何API调用还是进行其他处理？如果没有，也许您可以考虑根据组件的状态显示/隐藏模态。

从另一个操作调度操作

1 个答案: