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請求，對本地存儲中存在的數據的訪問等。
用英語 ：
法語：
