clean architecture front end
1.0.0
您好，这是一个存储库，可以将我的清洁架构愿景（首先在正面，然后在后面）发送给不同版本。
我写了一篇文章来支持该项目的示例：https：//www.hexa-web.fr/blog/blog/hexagogagogar-architecture-front-end了解干净的体系结构，您还可以阅读我关于前端依赖性倒置的文章：
对于这些示例，我选择基于React使用Next.js，但是该体系结构的全部要点是能够独立于使用的框架和库（外部依赖项）使用它。
为了有一个简单的例子，我选择了一个简单的主题：一个待办事项列表！
要查看在项目上仍需要完成的任务，请访问/DOCS/TODO.MD文件
如果您有任何疑问，建议或其他任何问题，请随时与我联系！如果此存储库为您提供了帮助，请考虑与您的熟人分享。
首先，安装依赖项：
npm install
# or
yarn install- -
然后运行开发服务器：
npm run dev
# or
yarn dev打开http：// localhost：3000使用浏览器查看结果。
- -
开始单元测试：
jest- -
在线测试应用程序：https：//front-end-clean-architecture.netlify.app/
六边形体系结构或基于端口和适配器的体系结构是软件设计领域中使用的架构模式。它旨在根据应用程序组件创建系统，这些应用程序组件松散耦合，并且可以通过端口和适配器轻松连接到其软件环境。这些组件是模块化的，可互换的，它增强了处理的一致性并促进了测试的自动化。
干净的体系结构中有三个部分：应用程序部分（主要端口和适配器），域（用例，域模型等）和基础架构部分（辅助端口和适配器）。
该体系结构基于端口 /适配器模式和依赖性反转原理。
通过在干净的体系结构（或六角形体系结构）上记录您。您会找到这些部分的不同名称。这里选择的名称是个人的，目标是它们是可以理解的。
使用情况定义了用户的操作。目的是不使用这些元素中的任何框架或库（为了保持逻辑不与这些工具相结合）。
在正面，它们可以按功能，按JS或TS编写的类表示。使用React，可以在此部分使用Redux。
如果使用REDUX，则操作是用例，状态是模型之一，选择器用于映射。
主要端口用于在主要适配器和用例之间建立合同。为此，可以创建一个接口。实际上，用例也被视为主要端口。
然后，这些接口的实现用于与域对话：第一个是我们所说的主要适配器。他们的目标是触发用例的执行。例如，在正面，这些适配器可以是执行触发动作（是否redux）的反应组件。
辅助端口用于在辅助适配器和用例之间建立合同。为此，我们通常创建一个接口。此接口直接在用例中使用。
提示：您可以为此使用依赖项注入，某些州管理库允许您这样做。例如，使用Redux-Thunk和Redux-Observable，可以通过“额外数据”，这将直接在Redux Action中使用。在“香草”中，也有inversifyjs。
接口（端口）的第二个实现称为辅助适配器。用例调用它们。例如，在前面，这些适配器可以是HTTP请求，对本地存储中存在的数据的访问等。
用英语 ：
法语：
