Reactjs 使用redux和redux saga作为中间件构建（文件夹结构）企业级React web应用程序的最佳实践是什么？

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

.
├── 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

---

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

我会选择特定的存储文件夹。这是我构建项目的方式：

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

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

由于Redux被用作唯一的真实来源，正确的方法是分割概念：一方面，您拥有组件，另一方面，Redux+Saga中的所有业务逻辑。应用程序逻辑没有与Redux Saga中的逻辑相映射，因此将其分离到自己的文件夹（例如，某些容器组件可能使用多个还原器）更有意义。

为什么要使用原子设计？

关注点分离

组件可重用性

简化测试

可伸缩性

一致性

可配置性

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

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

生物体： 将分子结合在一起形成组成界面独特部分的生物体（即导航栏）

模板： 主要由一组有机体组成，形成一个页面，客户可以在这里看到最终的设计

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

容器： 容器进行数据获取，然后呈现其相应的子组件

文件结构：

└── 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