React.JS的Clean整洁清洁架构案例源码

分层并不是一个新概念。它在行业中已经存在了两年多（有些人阅读本文档的人可能比分层还年轻）并且它是最早创建的架构风格之一。简而言之，分层只不过是将您的应用程序的关注点划分为不同的层，就像蛋糕一样，上层可以与底层通信，但反之则不行。

层通过门面进行交互，因此只要公共 API 受到尊重，层就不必了解其他层的内部实现细节。

最典型的分层架构有三层：UI、Domain和Infrastructure。我们的系统可以根据需要有多少层，不一定只有3层。只是这是最典型的一层。

将其转换为 React 应用程序，我们要做的是在顶层拥有我们的视图组件。然后我们的状态管理解决方案将进入下面的层。最后但并非最不重要的是，我们将有一个基础设施层来与外部资源对话，例如我们的后端、firebase 数据库、推送器、本地存储和任何其他外部信息源。

对于一个小型应用程序来说，这已经足够了，这可能是我们编写 React 应用程序很长时间的方式。但是随着应用程序的增长，这些层会变得越来越胖，并且它们开始做得太多，这使得它们更难以推理。

CLEAN 架构是一种分层架构，由来自其他分层架构的各种思想组成，如 Onion 架构、Hexagonal 架构和 Ports and Adapters 架构等。

CLEAN 背后的核心思想是将业务和业务实体置于软件系统的中心，并且彼此层层包裹实体。外层与业务无关，而内层则与业务有关。

我们将简要描述每一层在 clean 架构中的作用，以了解我们如何在 React 应用程序中利用其中的一些概念。

该案例源码（点击标题）是一个非常复杂的计数器应用程序，应用程序的一些要求。

• 初始值应该来自远程数据源
• 当计数器值为 0 时，计数器不能递减
• 我们应该将计数器值持久化回我们的远程数据源

实体：

// domain/counterEntity.ts
export interface Counter {
    value: number;
}

领域模型：

// domain/counterModel.ts
import type { Counter } from "./counterEntity";

const create = (count: Counter["value"]) => ({ value: count });
const decrement = (counter: Counter) => ({
  value: Math.max(counter.value - 1, 0)
});
const increment = (counter: Counter) => ({ value: counter.value + 1 });

export { create, decrement, increment };

数据存储（又名存储库）：

// domain/counterStore.ts
import type { Counter } from "./counterEntity";

interface CounterStore {
  // State
  counter: Counter | undefined;
  isLoading: boolean;
  isUpdating: boolean;

  // Actions
  loadInitialCounter(): Promise<Counter>;
  setCounter(counter: Counter): void;
  updateCounter(counter: Counter): Promise<Counter | undefined>;
}

export type { CounterStore };

用例：

如前所述，用例可以定义为用户故事，或者用户（或任何其他外部系统）可以用我们的系统做的事情。

我们的应用程序有 3 个用例

• 从数据源获取计数器初始值
• 增加计数器值
• 减少计数器值

请注意，更新远程数据源中的计数器值不是用例。这是增加或减少计数器的副作用。对于这一层，数据源是否远程甚至都无关紧要。