javascript - ReactJS - 等待 Action 在 componentDidMount 中完成

标签 javascript reactjs reactjs-flux

有问题的代码如下。我在 componentDidMount 中有一个异步 UserActions 调用,之后我立即从这个操作填充的 UserStore 中查找用户信息。显然,我不能依赖 UserStore.isLargeAccess() 的定义。将依赖于操作的代码放在回调中是最好的约定,还是我错过了一些更大的设计选择?

componentDidMount() {
    this.changeListener = this._onChange.bind(this);
    UserStore.addChangeListener(this.changeListener);
    OrganizationStore.addChangeListener(this.changeListener);

    // Fetch user info
    UserActions.get(AuthStore.username);

    // UserStore.isLargeAccess() is undefined here,
    // because the previous action has not finished.
    if (UserStore.isLargeAccess()) {
      OrganizationActions.getUsers(this.state.organization);
    }

    if (UserStore.isGlobalAccess()) {
      OrganizationActions.getOrganizations();
    }
  }

最佳答案

它应该如何工作(如果我了解您的流程):

  1. 您应该为每个商店注册不同的回调(否则您不知道哪个商店发出事件)
  2. 您开始一些异步工作。
  3. 当异步工作完成后,它会使用来自异步工作的一些数据调度操作
  4. 您的商店 UserStore 和 OrganizationStore 监听这个 Action ,当他们收到这个 Action 时,他们会做一些工作并发出变化。
  5. 当它们发出变化时,它们会从您的组件调用回调。在每个回调中,您知道哪个商店调用它,因此您知道从哪个商店获取数据。

关于javascript - ReactJS - 等待 Action 在 componentDidMount 中完成,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34600862/

相关文章:

Javascript 函数不断添加文本

javascript - 如何正确使用 nconf 和熨斗

javascript - 禁用输入框的编辑部分

javascript - react native : Closing Drawer Upon Scene Navigation Using React Native Router Flux

javascript - 使用登录流程处理权限敏感操作的 React/Flux 方式

javascript - 在 Rails 中使用 JQuery Jcrop 插件裁剪头像

javascript - 文本区域的奇怪行为

javascript - 为什么这些数据没有发送到 Redux 中?

reactjs - 应用程序 useEffect 未通过 react 路由器触发

javascript - 仅当另一个函数在 React 中运行完成时才调用一个函数