Question

我正在使用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

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

containers/
  HomePageApp.js
  EpisodePageApp.js
  ...

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

actions/
  Player.js
  Episode.js
  ...

我这样做了吗？我没有找到关于谷歌搜索的很多信息，我发现我认为它们只限于小项目。

谢谢！

Answer 1

在官方示例中，我们有几个顶级目录：

components表示“dumb” React组件未发现Redux;
containers表示连接到Redux的“智能”React组件;
actions适用于所有动作创建者，其中文件名对应于应用的一部分;
reducers适用于所有reducer，其中文件名对应于州名;
store用于商店初始化。

这适用于中小型应用。

当您想要将更多模块化和组相关的功能放在一起时，Ducks或other ways of grouping functionality by domain是构建Redux模块的不错替代方法。

最终选择最适合您的结构。 Redux的作者无法比你更了解什么对你有利。

Answer 2

这是一个关于最佳实践/代码风格的问题，并没有明确的答案。然而，在React redux boilerplate项目中提出了一种非常简洁的风格。它与你现在的非常相似。

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

我更喜欢将智能和愚蠢的组件保存在同一个文件中，但是使用默认导出智能组件并导出演示文稿/哑组件。这样可以减少目录结构中的文件噪音。还可以通过“查看”对组件进行分组，即（Administration =＆gt; [admin.js，adminFoo.js，adminBar.js]，Inventory =＆gt; [inventory.js，inventoryFoo.js，inventoryBar.js]等）。

Answer 4

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

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

你要把可重复使用的组件放在哪里？内部功能/域名文件夹？因此，如果您需要来自其他功能/域的可重用组件，您需要在域之间创建依赖关系吗？ mmh对于大型应用来说不太好！

当你必须组合reducer时，域代码结构会消除之前给你的东西。

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

Answer 5

我有一个带有react，redux文件夹结构的样板，它已用于许多公司项目。您可以在这里查看：https://github.com/nlt2390/le-react-redux-duck

如何构建Redux组件/容器

5 个答案: