【问题标题】:ReactJS - waiting for action to finish within componentDidMountReactJS - 在 componentDidMount 中等待动作完成
【发布时间】:2016-04-08 15:20:04
【问题描述】:

有问题的代码如下。我在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();
    }
  }

【问题讨论】:

    标签: javascript reactjs reactjs-flux


    【解决方案1】:

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

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

    【讨论】:

    • 在#1中,通过注册不同的回调,你的意思是添加不同的变化监听器吗?也就是这一行:UserStore.addChangeListener(this.changeListener);?
    • 是的,我是认真的。这不是必需的,但它有助于使您的模块流程更加清晰。
    • 嗯...我将代码更改为以下内容。首先,我调用UserAction 来填充UserStore。鉴于我已经注册了一个回调来观察UserStore 中的变化,一旦UserStore 发出变化,然后我调用OrganizationAction。但是,这会引发以下错误:“无法在调度过程中调度。”。我应该在这个问题中添加我的新代码吗?
    猜你喜欢
    • 2018-05-02
    • 1970-01-01
    • 2018-07-25
    • 2015-06-24
    • 2020-07-06
    • 2013-02-13
    • 1970-01-01
    • 1970-01-01
    • 2015-11-24
    相关资源
    最近更新 更多