Java 中的 Flux 模式：利用单向数据流简化复杂 UI

约 3 分钟

Flux 设计模式的意图

Flux 设计模式旨在通过强制执行单向数据流来管理 Java 应用程序（尤其是客户端 Web 应用程序）中的数据流。它旨在简化复杂数据交互的管理，并促进组件之间更可预测的状态行为。

Flux 模式的详细解释及现实世界例子

现实世界例子

将繁忙的餐厅厨房类比为 Flux 设计模式。在这种情况下，厨房根据收到的客户订单（操作）进行运作，这些订单通过一个控制点（调度器）处理，这个控制点可以由主厨代表。当订单到达时，主厨将特定任务分配给厨房的各个部分（存储），例如烤架、沙拉台或甜点团队。每个部分将他们任务的进度（状态更改）更新回主厨，主厨确保所有订单部分都以同步方式协调和完成，然后将菜肴送出给客户（视图）。

通俗来说

Flux 设计模式通过单向架构管理应用程序中的数据流，协调操作、调度器、存储和视图，以确保稳定和可预测的状态管理。此模式在 Java 设计模式中对开发响应式客户端 Web 应用程序特别有用。

维基百科说

为了支持 React 的单向数据流概念（这可能与 AngularJS 的双向数据流形成对比），Flux 架构被开发为流行的模型-视图-控制器架构的替代方案。Flux 特性包括操作，这些操作通过中央调度器发送到存储，而存储的更改则传播回视图。

Java 中 Flux 模式的编程示例

Flux 设计模式用于构建客户端 Web 应用程序。它提倡单向数据流。当用户与视图交互时，视图会通过中央调度器将操作传播到存储应用程序数据的各个存储，并包含业务逻辑，这些存储会更新所有受影响的视图。

在提供的代码中，我们可以看到 App 和 MenuStore 类中的 Flux 模式的示例。

App 类是应用程序的入口点。它初始化和连接系统，将存储注册到调度器，将视图注册到存储，并触发视图的初始渲染。当单击菜单项时，它会通过调度器触发事件。

public class App {

  public static void main(String[] args) {

    var menuStore = new MenuStore();
    Dispatcher.getInstance().registerStore(menuStore);
    var contentStore = new ContentStore();
    Dispatcher.getInstance().registerStore(contentStore);
    var menuView = new MenuView();
    menuStore.registerView(menuView);
    var contentView = new ContentView();
    contentStore.registerView(contentView);

    menuView.render();
    contentView.render();

    menuView.itemClicked(MenuItem.COMPANY);
  }
}

MenuStore 类是一个具体的存储，它保存菜单的状态。它在收到调度器的操作时更新其状态并通知视图。

public class MenuStore extends Store {

  @Getter
  private MenuItem selected = MenuItem.HOME;

  @Override
  public void onAction(Action action) {
    if (action.getType().equals(ActionType.MENU_ITEM_SELECTED)) {
      var menuAction = (MenuAction) action;
      selected = menuAction.getMenuItem();
      notifyChange();
    }
  }
}

在本例中，当单击菜单项时，MenuView 会触发 MENU_ITEM_SELECTED 操作。Dispatcher 将此操作转发到所有已注册的存储。MenuStore 处理此操作，方法是更新其状态并通知其视图，从而导致它们使用新状态重新渲染。

这是一个 Flux 模式的基本示例，其中操作从视图中分发，由存储处理，并导致视图更新。

Flux 模式的详细解释及现实世界例子

何时在 Java 中使用 Flux 模式

Flux 适用于开发客户端 Java 应用程序，在这些应用程序中，维护跨各种组件的一致数据和管理复杂的状态交互至关重要。它特别适合具有动态用户界面的应用程序，这些用户界面对频繁的数据更新做出反应。

Java 中 Flux 模式的现实世界应用

Facebook 广泛使用 Flux 设计模式，并与 React 结合使用，构建健壮、可扩展的用户界面，可以有效地处理复杂的数据更新。许多现代 Web 应用程序采用 Flux 或其变体（如 Redux）来管理需要高响应性和可预测性的环境中的状态。
许多现代 Web 应用程序采用 Flux 或其变体（如 Redux）来管理需要高响应性和可预测性的环境中的状态。

Flux 模式的优缺点

优点

确保单向数据流，从而简化调试和测试。
通过集中应用程序状态，增强应用程序的一致性。
提高大型应用程序中数据流和交互的可预测性。

权衡

可能会在较小的应用程序中引入样板代码和复杂性。
可能需要学习曲线才能理解模式的架构及其实现细微差别。

观察者：Flux 的调度器组件类似于观察者，管理有关数据更改到各个存储的通知。
单例：通常，Flux 中的调度器作为单例实现。
中介者：Flux 可以被认为是中介者模式的一种变体，其中调度器仲裁数据流并确保组件不直接更新状态。