了解 React/Redux 架构层和模块

Question

很多时候我遇到以下 React/Redux 结构，我不明白在这种情况下 layers/modules 是什么：

-actions folder
    --authentication.js
    --product.js

-api folder
    --axios.js -> for sending HTTP requests

-components folder
   --Component1Folder
     --Component1.js
     --SubSection folder
         ---Component1SubsectionA.js
         ---Component1SubsectionB.js

   --Component2Folder
     --Component2.js

-constants folder
    --actionTypes.js -> here are saved the redux dispatch constant variable like: AUTHENTICATION

-reducers folder
  --index.js -> containing all of the reducers
  --authentication.js
  --product.js

-service folder
  --socket.js -> creating socket connection

-App.js -> containing React components
-index.js -> Rendering App and provides the redux store
-store.js -> Creating Redux store

在这个架构中有哪些层以及它们包含哪些模块？

我想过这个：

服务层：包含api模块和服务模块

视图层：包含组件模块

业务层：包含动作、常量、reducer 模块

很多时候axios也包含authorization，那么还有一层是Authentication层？或者这只是一个简单的功能。

还有一个我不明白的是，组件也包含业务逻辑，那么它们是属于视图层还是属于业务层？也许 return 到视图层和业务层的其他任何东西？

我的想法对吗？提前致谢。

Answer 1

该文件结构基于相当古老的观点 - 如今，例如使用官方 Redux 模板 (create-react-app myApp --template redux) 创建项目时，您会得到不同的文件结构。

Redux 风格指南在 Structure Files as Feature Folders with Single-File Logic.

点提供了一点见解

但最后，这些都是建议。不需要“服务层”、“视图层”或“业务层”。您也可以将所有这些放入一个文件中，然后收工。最后，文件结构主要是为了让您按照对您和您的团队感觉良好的方式来构建代码。所以最重要的是你对你的应用程序如何工作以及你想把什么放在哪里有类似的理解。外部没有人可以 100% 告诉您该怎么做。

了解 React/Redux 架构层和模块

Understanding React/Redux Architecture layers and modules

architecture

module

layer

reactjs

redux