使用 redux 和 redux-saga 作为中间件的架构（文件夹结构）企业级 React Web 应用程序的最佳实践是什么？ [关闭]答案

【问题标题】：What is the best practice to architecture (folder structure) enterprise level React web application, using redux and redux-saga as middleware? [closed]使用 redux 和 redux-saga 作为中间件的架构（文件夹结构）企业级 React Web 应用程序的最佳实践是什么？ [关闭]
【发布时间】：2020-11-01 14:24:00
【问题描述】：

需要对我当前的文件夹结构进行任何更改吗？首选基于组件还是基于原子级别的文件夹结构？

.
├── App.css
├── App.js
├── App.test.js
├── assests
├── components
│   └── button.js
├── constants
├── helpers
├── index.css
├── index.js
├── pages
│   ├── action.js
│   ├── homePage.js
│   ├── reducer.js
│   └── saga.js
├── routes
├── services
└── serviceWorker.js

【问题讨论】：

标签： reactjs react-redux redux-saga directory-structure

【解决方案1】：

为什么要采用原子设计？

关注点分离。
组件的可重用性。
简化测试。
可扩展性。
一致性。
可配置性。

原子： 物质的基本构建块，例如按钮、输入或表单标签。它们本身没有用。

分子： 将原子组合在一起，例如组合按钮、输入和表单标签来构建功能。

有机体： 将分子组合在一起形成构成界面的不同部分（即导航栏）的有机体

模板： 主要由一组有机体组成，形成一个页面——客户可以在其中看到最终设计到位。

页面： 查看不同模板渲染的生态系统。我们可以在一个环境——应用程序中创建多个生态系统。

容器：容器进行数据获取，然后渲染其对应的子组件

文件结构：

└── src
    ├── actions
    │   └── action.js
    ├── App.js
    ├── components
    │   ├── atoms
    │   │   └── index.js
    │   ├── molecules
    │   │   └── index.js
    │   ├── organisms
    │   │   └── index.js
    │   └── templates
    │       └── index.js
    ├── index.js
    ├── pages
    │   └── home
    │       └── HomeComponent.js
    │       └── HomeContainer.js
    ├── reducers
    │   └── index.js
    ├── resources
    │   └── img
    │       └── logo.svg
    ├── routes.js
    ├── sagas
    │   └── index.js
    ├── serviceWorker.js
    ├── setupTests.js
    ├── store.js
    └── tests
        └── application.spec.js

【讨论】：

【解决方案2】：

我会去一个特定的商店文件夹。这是我构建项目的方式：

.
├── ...
├── components
│   └── containers
│       └── someConnectedComponent.js
│   └── presentational
│   └── UI
│       └── button.js
├── store
│   └── actions
│   └── middleware
│       └── index.js
│       └── some.saga.js
│       └── another.saga.js
│   └── reducers
└── ...

连接到 Redux 的组件放在容器文件夹中。
他们的孩子（未连接）进入演示文件夹。
可重用组件位于演示文稿内的 UI 文件夹中。
Redux 有自己的特定文件夹，而 Saga 位于中间件文件夹中。

由于 Redux 被用作单一事实来源，正确的方法是拆分概念：一方面，您拥有组件，另一方面，Redux + Saga 中的所有业务逻辑。应用程序逻辑并没有与 Redux Saga 中的逻辑镜像，因此分离到它们自己的文件夹中更有意义（例如，某些容器组件可能使用多个 reducer）。

【讨论】：

【解决方案3】：

在我看来，您可以独立放置 action、reducer 和 saga，就像您必须从页面文件夹中取出一样，因为该文件夹应该只包含像登录页面这样的页面。

【讨论】：