在一个组件中如何等待一个动作结果来调用其他动作？

【问题标题】：In a component how to wait for an action result to invoke other action?在一个组件中如何等待一个动作结果来调用其他动作？
【发布时间】：2016-10-24 18:42:47
【问题描述】：

我在我的应用程序中使用 React + Flux。一般流程是我将从 JSX 组件调用 action 方法，该 action 方法将调用 store 更新状态并发出更改事件，并且状态将在 JSX 组件中更新。

现在的问题是，我已经根据它们的工作将动作和存储分离到不同的文件中（2 个动作文件和 2 个存储文件）。

我可以在 JSX 组件中编写这种代码吗？（action2.method2() 调用正在等待 actions1.method1() 的结果）。如果没有，我该如何改进？ method1() 和 method2() 是两个不同的 action 方法，所以我们不能在 actions1.method1() 的主体内调用 actions2.method2() 并且 method2 需要访问由 method1() 更新的状态。

this.getFlux().actions.actions1.method1()
        .then(() => {
          this.getFlux().actions.actions2.method2(this.state.method1UpdatedState);
         })
        .catch((error) => { console.log("error : ", error)} );

【问题讨论】：

标签： javascript reactjs flux reactjs-flux jsx

【解决方案1】：

我建议让操作尽可能简单，并将所有业务逻辑移至您的商店。因此，如果您需要来自store1 和store2 的数据，只需将store1 作为依赖项注入您的store2 并监听由action1 在您的store2 中生成的特定事件。你绝对应该避免在你的组件中实现这个逻辑。

例如，store2.js 应该是这样的

import store1 from './store1';

store2.dispatchToken = AppDispathcer.register((payload) => {
   var action = payload.action;

   switch(action) {
       case 'ACTION_1':
         AppDispathcer.waitFor([store1.dispatchToken]);
         let data = store1.getDataFromAction1();
         // ... here you can update store2 data
         // ... and call store2.emitChange();
         break;
   }

});

【讨论】：