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

Question

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

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

Answer 1

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

Answer 2

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

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

连接到 Redux 的组件放在容器文件夹中。
他们的 children (non-connected) 进入展示文件夹。
可重复使用的组件位于 UI 文件夹内的演示文稿中。
Redux 有自己的特定文件夹，Saga 位于中间件文件夹内。

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

Answer 3

为什么要采用 Atomic 设计？

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

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

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

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

模板： 主要由生物群构成一个页面——客户可以在其中看到最终设计。

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

容器：一个容器做数据抓取然后渲染对应的子组件

文件结构:

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

使用 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?

reactjs

react-redux

redux-saga

directory-structure

为什么要采用 Atomic 设计？