如何构建 Redux components/containers

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

这更多是关于最佳实践/代码风格的问题，没有明确的答案。然而，在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 2

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

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

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

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

请注意，只需创建一个 reducers/ 目录（如 actions/）即可将 reducers.js 拆分为多个文件，并且您无需更改任何导入语句。

Answer 3

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

components 对于 “dumb” 不了解 Redux 的 React 组件；
containers 用于连接到 Redux 的“智能”React 组件；
actions 适用于所有动作创建者，其中文件名对应于应用程序的一部分；
reducers 对于所有reducer，其中文件名对应state key；
store 用于存储初始化。

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

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

最终选择最适合您的结构。 Redux 的作者不可能比你更清楚什么对你来说更方便。

Answer 4

我更喜欢将智能组件和哑组件保存在同一个文件中，但对智能组件使用默认导出，对 presentation/dumb 组件使用默认导出。通过这种方式，您可以减少目录结构中的文件噪音。还按 "View" 对组件进行分组，即（管理 => [admin.js、adminFoo.js、adminBar.js]、库存 => [inventory.js、inventoryFoo.js , inventoryBar.js], 等等）。

Answer 5

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

如果您使用基于域的代码结构，您可以简化 domain/feature 实施和维护...另一方面，您会使组件依赖性和应用 state/logic 维护复杂化。

您打算将可重用组件放在哪里？在 feature/domain 文件夹中？因此，如果您需要来自其他 feature/domain 的可重用组件，您需要在域之间创建依赖关系？ mmh 不太适合大型应用程序！

当你必须组合 reducer 时，domain-code-structure 会带走它之前给你的东西。

您仅为每个 domain/feature 创建单个 redux 模块。域代码结构在 some/most 情况下应该很好，但这不是 Redux。

Answer 6

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

如何构建 Redux components/containers

How to structure Redux components/containers

javascript

reactjs

reactjs-flux

redux