如何构建 Redux 组件/容器

Question

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

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

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

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

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

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

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

谢谢！

Answer 1

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

• components for “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 => [admin.js, adminFoo.js, adminBar.js], Inventory => [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 中，您有一个操作入口点（actions/ 文件夹）和一个 reducer 入口点（reducers/ 文件夹）。

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

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

当您必须组合化简器时，域代码结构会带走它之前提供给您的东西。

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

Answer 6

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