45

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

成分
  常见/诸如链接、标题标题等的东西
  表单/按钮、输入等
  播放器/构成播放器的所有小组件
    index.js 这个是顶层布局组件
    playBtn.js
    艺术家姓名.js
    歌曲名.js
  剧集/另一个组件

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

容器/
  HomePageApp.js
  EpisodePageApp.js
  ...

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

行动/
  播放器.js
  情节.js
  ...

我这样做对吗？我在谷歌上没有找到太多关于它的信息，而且我发现的那些我认为它们仅限于小型项目。

谢谢！

4

6 回答 6

15

这更多是关于最佳实践/代码风格的问题，并没有明确的答案。然而，在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
于 2015-09-17T15:44:03.340 回答
4

我更喜欢将智能组件和哑组件保存在同一个文件中，但对智能组件使用默认导出，对演示/哑组件使用导出。这样，您可以减少目录结构中的文件噪音。还按“视图”对组件进行分组，即（管理 => [admin.js，adminFoo.js，adminBar.js]，Inventory => [inventory.js，inventoryFoo.js，inventoryBar.js] 等）。

于 2016-03-26T14:19:01.190 回答
2

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

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

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

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

请注意，reducers.js只需创建一个reducers/类似的目录即可将其拆分为多个文件，actions/而您无需更改任何导入语句。

于 2015-09-20T18:10:36.420 回答
0

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

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

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

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

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

于 2016-07-08T08:45:22.563 回答
-1

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

于 2019-07-26T16:04:44.543 回答