如何构buildRedux组件/容器

我正在使用REDX，我不知道如何组织我的组件，我认为最好的方法是将它们保存在主文件夹名称和文件夹名称以及所有内部组件的文件夹中：

组件
  常见的东西，如链接，标题标题等
  表格/button，input等
  玩家/所有小组件组成玩家
     index.js这个是顶层布局组件
     playBtn.js
     artistName.js
     songName.js
  插曲/另一个组件

然后，在容器文件夹中，每页有一个容器，这是我实际连接到Redux的唯一容器：

集装箱/
   HomePageApp.js
   EpisodePageApp.js
   ...

然后这些操作是每个顶级组件一个，而不是每个页面一个，所以在连接到Redux的页面容器中，我传递了该页面中使用的组件的所有操作。 例如：

动作/
   Player.js
   Episode.js
   ...

我做对了吗？ 我没有find关于它的谷歌search的很多信息，我发现我认为他们只限于小项目。

谢谢！

Answer 1

在官方的例子中，我们有几个顶层目录：

• components为“哑” React组件不知道Redux;
• containers连接到Redux的“智能”React组件;
• 所有动作创build者的动作，其中文件名称对应于应用程序的一部分;
• 所有缩减器的缩减器，其中文件名称对应于状态键;
• store用于商店初始化。

这适用于中小型应用程序。

当您想要将更多模块化和相关的function组合在一起时， Ducks或其他按域分组function的方法是构buildRedux模块的一个很好的替代方法。

最终select适合你的任何结构。 Redux的作者不可能比你更了解什么方便。

Answer 2

这是一个关于最佳实践/代码风格的问题，并没有明确的答案。 然而， React redux样板工程提出了非常整洁的风格。 这与你目前的状况非常相似。

 ./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 

Answer 3

我更喜欢在同一个文件中保持智能和愚蠢的组件，但使用智能组件的默认导出和演示/哑组件的导出。 这样可以减less目录结构中的文件噪音。 也可以通过“查看”（即pipe理=> [admin.js，adminFoo.js，adminBar.js]，库存=> [inventory.js，inventoryFoo.js，inventoryBar.js]等）对组件进行分组。

Answer 4

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

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

我使用webpack别名state ，所以在容器组件中，我可以import {someActionCreator} from 'state/actions'; 。

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

请注意， reducers.js可以简单地通过制作一个reducers/目录（如actions/来拆分成多个文件，而且您不必更改任何导入语句。

Answer 5

在Redux中，您有一个动作入口（动作/文件夹）和一个入口点（reducer /文件夹）。

如果使用基于域的代码结构，则可以简化域/function实现和维护…另一方面，您正在使组件依赖性和应用程序状态/逻辑维护复杂化。

你要把可重复使用的组件放在哪里？ 里面的function/域文件夹？ 所以如果你需要从其他function/域的可重用组件，你需要创build一个域之间的依赖关系？ mmh不适合大型应用程序！

当你必须结合reducer，域代码结构带走了它以前给你的东西。

您只为每个域/function创build单个redux模块。 在一些/大多数情况下，域代码结构应该是好的，但这不是Redux。