Javascript 如何构造Redux组件/容器

我正在使用redux，我不确定如何组织我的组件，我认为最好是将它们保存在文件夹中，以主组件的名称作为文件夹的名称，所有内部组件都在其中：

components Common/ things like links, header titles, etc Form/ buttons, inputs, etc Player/ all small components forming the player index.js this one is the top layout component playBtn.js artistName.js songName.js Episode/ another component 组件 常见/常见的链接、标题等 表格/按钮、输入等 播放器/构成播放器的所有小部件 index.js这是最上面的布局组件 playBtn.js artistName.js songName.js 情节/另一部分 然后，在containers文件夹中，我每页有一个容器，这是我实际连接到Redux的唯一容器：

containers/ HomePageApp.js EpisodePageApp.js ... 容器/ HomePageApp.js eposodepageapp.js ... 然后每个顶级组件都有一个操作，而不是每个页面一个，因此在我连接到Redux的页面容器中，我传递该页面中使用的组件的所有操作。例如：

actions/ Player.js Episode.js ... 行动/ Player.js 小插曲 ... 我这样做对吗？我在谷歌上找不到太多关于it的信息，我发现的那些信息只限于小项目

---

谢谢

这更多的是关于最佳实践/代码风格的问题，没有明确的答案。然而，项目中提出了一种非常整洁的风格。这和你现在拥有的非常相似

./react-redux-universal-hot-example
├── bin
├── src
│   ├── components // eg. import { InfoBar } from '../components'
│   │   ├── CounterButton
│   │   ├── GithubButton
│   │   ├── InfoBar
│   │   ├── MiniInfoBar
│   │   ├── SurveyForm
│   │   ├── WidgetForm
│   │   └── __tests__
│   ├── containers // more descriptive, used in official docs/examples...
│   │   ├── About
│   │   ├── App
│   │   ├── Home
│   │   ├── Login
│   │   ├── LoginSuccess
│   │   ├── NotFound
│   │   ├── RequireLogin
│   │   ├── Survey
│   │   ├── Widgets
│   │   └── __tests__
│   │       └── routes.js // routes defined in root
│   ├── redux
│   │   ├── init.js
│   │   ├── middleware
│   │   │   └── clientMiddleware.js  // etc
│   │   └── modules // (action/creator/reducer/selector bundles)
│   │       ├── auth.js
│   │       ├── counter.js
│   │       ├── reducer.js  
│   │       ├── info.js
│   │       └── widgets.js
│   ├── server
│   │   ├── middleware
│   │   └── actions // proxy to separate REST api...
│   └── utils
│   │   ├── validationUtility.js // utility only (component-level definitions inside respective dir)
│       └── createDevToolsWindow.js  // etc
├── static
│   ├── dist
│   └── images
└── webpack

---

我对组件目录没有强烈的意见，但我喜欢将动作、常量和减缩器放在一起：

state/
  actions/
    index.js
    ...
  constants.js
  reducers.js

我用webpack别名

state

，这样在容器组件中我可以

从“state/actions”导入{someActionCreator}

这样，应用程序中的所有有状态代码都驻留在一个地方

请注意，
reducers.js
只需像
actions/
那样创建一个
reducers/
目录，就可以拆分成多个文件，您不必更改任何导入语句。
在官方示例中，我们有几个顶级目录：


组件
用于不知道Redux的React组件
容器
用于连接到Redux的“智能”React组件
操作
适用于所有操作创建者，其中文件名对应于应用程序的一部分
减速机
用于所有减速机，其中文件名对应于状态键
存储
用于存储初始化

这适用于中小型应用程序

当您想将更多的模块化和相关功能组合在一起时，或者是构建Redux模块的一种很好的替代方法

最终选择最适合你的结构。Redux作者不可能比您更了解什么对您更方便。
我更喜欢将智能组件和非智能组件保存在同一个文件中，但对智能组件使用默认导出，对演示/非智能组件使用默认导出。这样可以减少目录结构中的文件噪音。还可以按“视图”对组件进行分组，即（管理=>[admin.js，adminFoo.js，adminBar.js]，库存=>[Inventory.js，inventoryFoo.js，inventoryBar.js]等）
 在Redux中，您有一个操作入口点（操作/文件夹）和一个还原器入口点（还原器/文件夹）

如果您使用基于域的代码结构，则可以简化域/功能的实现和维护。。。另一方面，组件依赖关系和应用程序状态/逻辑维护变得复杂

你要把可重用组件放在哪里？在功能/域文件夹内？因此，如果您需要来自其他功能/域的可重用组件，您需要在域之间创建依赖关系吗？嗯，不太适合大型应用程序

当您必须组合减速器时，域代码结构会带走它以前提供给您的内容

您仅为每个域/功能创建单个redux模块。
域代码结构在某些/大多数情况下应该是好的，但这不是Redux。
我有一个带有react、Redux文件夹结构的样板文件，它正在许多公司项目中使用。您可以在这里查看：
我发现redux表单非常方便。但它与国家有关，你认为它应该是什么目录。@Dan-好奇你的想法吗？一开始，我对
容器与
组件的职责划分不太清楚，但容器与组件的“层次结构”似乎与文件命名一起内置。@Banjer:我对结构没有任何意见：-）。使用对你有用的东西。我不是合适的人选，因为我不是在用Redux构建应用程序。好吧，我会选择一种风格并用它运行。但展望未来，我们会希望你对每件事都发表意见……这件衬衫看起来怎么样？我喜欢这个想法。请看这篇文章：存储库可能会改变位置，你的答案将留在这里。因此，请总结一下您在项目中所做的工作，以使您的答案更有用。另见：