在Flux架构中，如何从单个用户事件创建两个操作？

Question

我认为有三种选择：

1. UI组件调用两个ActionCreator方法。每个ActionCreator都会发送一条消息。
2. UI Component调用一个ActionCreator方法，该方法调度消息并调用另一个ActionCreator方法。
3. UI组件调用一个ActionCreator方法，该方法不调度任何消息，但调用另外两个ActionCreator方法，每个方法都调度自己的消息。

是否有理由更喜欢其中一种选择？还有其他选择吗？

Answer 1

这是一种思维方式，并不是思考行动的正确方法。操作通知您的应用程序，它们不会引起副作用。

商店可以控制您的申请。它们是所有逻辑所在的地方。商店会因为从行动中获得的信息而产生副作用。行动就像一份报纸。商店回应新闻。

动作描述了现实世界中发生的事情。在这种情况下，用户做了一些事情。可能是服务器响应了一些数据，或者浏览器完成了动画帧。无论如何，这是一个实际发生的奇异事件，而不是代码的人为构造。

你想要的是以回应以两种不同的方式来对待这个用户事件，这个单一动作。两个不同的商店将以不同的方式响应相同的行为。

所以你会在事件处理程序中有这个：

MyAppActions.userClicked(itemID);

这将创建一个这样的动作：

userClicked: function(itemID) { 
  MyDispatcher.dispatch({
    type: MyAppActions.types.USER_CLICKED,
    id: itemID,
  });
},

这会在您的商店中发挥作用，如：

switch (action.type) {
  case MyAppActions.types.USER_CLICKED:
    this._handleUserClicked(action.id);
    break;
  // ...
}

在这两个商店中，_handleUserClicked的实现将执行特定商店的特定事务。

Answer 2

除非你需要按特定顺序完成，否则没有理由更喜欢一个人，而不是另一个人。如果是这种情况，你可能想让第一个动作做它的事情，然后调用第二个动作（你在上面的第2个中确定）。但是，如果没有排序，没有特别的理由选择你概述的三种方法中的任何一种。

Answer 3

就像哈尔所说，这取决于你使用它们的原因。

  

  
1. UI组件调用两个ActionCreator方法。每个ActionCreator都会发送一条消息。
  

如果您不确定将使用哪些操作，我认为这是最佳解决方案。如果在其他情况下可以单独调用这些方法，那么如果你让UI组件调用两个ActionCreator方法会更容易。

  

  
1. UI Component调用一个ActionCreator方法，该方法调度消息并调用另一个ActionCreator方法。
  

如果您需要按特定顺序执行操作，那么您应该有一个操作可以调用另一个操作，以确保第一个操作在第二个操作开始之前完成。

  

  
1. UI组件调用一个ActionCreator方法，该方法不调度任何消息，但调用另外两个ActionCreator方法，每个方法都调度自己的消息。
  

我认为这可能是最不实用的，因为它与情况1的作用相同，但强制性地将这两个行为绑定在一起。只有在你总是需要执行这两个动作时才使用它。