谁说 Flux 允许 Action？答案

【问题标题】：Who says that an Action is allowed in Flux?谁说 Flux 允许 Action？
【发布时间】：2014-12-19 14:10:55
【问题描述】：

我正在尝试在我的一个项目中使用 Flux 架构。

我的一些 Action 需要满足先决条件才能允许调度该 Action。

目前，这个先决条件检查逻辑在我的视图代码中，类似于这样（伪代码）：

class FooView {
    void OnButtonClick() {
        if (FooStore.IsButtonClickAllowed) {
            Dispatch(ButtonClickAction);
        }
    }
}

这对我来说看起来很尴尬，因为现在我的视图里面有业务逻辑代码。我很想把这个检查代码放到我的商店里，但我做不到。我有不止一个商店处理这个动作，只有一个商店知道它是否有效。所以它不起作用：

class FooStore {
    void Handle(Action) {
        if (Action is ButtonClickAction) {
            if (IsButtonClickAllowed) {
                FooData.Something();
            } else {
                // Ignore
            }
        }
    }
}

class BarStore {
    void Handle(Action) {
        if (Action is ButtonClickAction) {
            BarData.Something();
        }
    }
}

我无法从BarStore 判断ButtonClickAction 是否被允许，除非我“WaitFor(FooStore)”然后询问它，但这将导致处理此操作的每个商店都包含相同的检查，从而导致真的很乱。

到目前为止，我了解到 Flux 中的动作只有在保证被允许的情况下才会被调度，即需要在调度之前检查动作的有效性。这意味着这个验证需要在视图中？

解决上述按钮示例的情况可能很简单：“在不允许的时候隐藏按钮，它永远不会发生”。但是假设我有一个 Action 在用户点击空格键时被调度，我该怎么办？当不允许执行操作时，我无法从用户键盘上删除空格键。

附：我没有使用 React，所以问题纯粹是关于 Flux 架构风格，我什至没有使用 JavaScript。

【问题讨论】：

标签： reactjs-flux

【解决方案1】：

也许这是一个程度的问题。我不认为对商店管理的属性的简单检查是业务逻辑。我认为这是非常简单的视图逻辑：

if (FooStore.IsButtonClickAllowed) {

那行似乎已经抽象出了关于为什么按钮可能不可点击的所有规则，并且看起来所有这些都在商店中进行管理，这是恰当的。

Flux 中的 Action 只有在保证被允许的情况下才会被调度，即在调度之前需要检查 Action 的有效性。

我不同意这一点。有不同类型的验证。

有时可以在视图组件中完成非常简单的验证。在 React 中，组件可能会使用少量的状态。输入组件是执行此操作的特别好地方。例如，检查用户是否输入了类似于电子邮件地址的内容，可以在视图组件中完成。

但是，大多数验证都需要针对应用程序状态或持久数据进行。在这些情况下，您需要发送操作，然后让商店使用业务逻辑对其进行响应。

动作应该像报纸一样，报道现实世界中发生的事情：用户做了某事，服务器返回了响应等。不需要阻止动作的发生；他们报告实际发生的事情。商店负责其余的工作。

当用户做了违反验证规则的事情时，商店会通过向视图提供错误数据来对此做出响应。

【讨论】：

我明白你的意思。但是，由于动作需要是报纸，所以当它无效时不能发送。如果单个商店以“错误”响应它，则此操作仍会分派到其他商店，并且其他商店可能会更改某些不应该更改的状态。我正在使用一个名为ActionDispatcher 的新“组件”，它在分派操作之前执行所需的验证，因此视图总是要求ActionDispatcher 做某事，即视图不分派直接行动。

【解决方案2】：

我创建了一个新组件 (ActionDispatcher) 来处理验证：

class ActionDispatcher {
    void ButtonClick() {
        if (FooStore.IsButtonClickAllowed) {
            Dispatch(ButtonClickAction);
        }
    }
}

然后，视图（和其他动作源）总是使用ActionDispatcher，而不是直接调度动作：

class FooView {
    void OnButtonClick() {
        ActionDispatcher.ButtonClick();
    }
}

我刚刚将验证代码组织到一个位置。

【讨论】：