javascript-如何构造Redux组件/容器

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

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

containers/
  HomePageApp.js
  EpisodePageApp.js
  ...

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

actions/
  Player.js
  Episode.js
  ...

我这样做对吗? 我没有找到关于它的更多信息,我发现我认为它们仅限于小型项目。

谢谢!

Franco Risso asked 2020-07-28T22:15:47Z
6个解决方案
94 votes

在官方示例中,我们有几个顶级目录:

  • store,用于未意识到Redux的“哑” React组件;
  • 用于连接到Redux的“智能” React组件的store
  • 适用于所有动作创建者的store,其中文件名对应于应用程序的一部分;
  • store,用于所有reducer,其中文件名对应于状态键;
  • store用于商店初始化。

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

如果您想将更多的模块化功能和组合在一起的功能一起使用,则Ducks或按域对功能进行分组的其他方式是构造Redux模块的一种不错的替代方法。

最终选择最适合您的结构。 Redux的作者无法比您更好地了解什么对您来说更方便。

Dan Abramov answered 2020-07-28T22:16:47Z
15 votes

这更多是关于最佳做法/代码风格的问题,目前尚无明确答案。 但是,在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
Kloar answered 2020-07-28T22:17:07Z
4 votes

我更喜欢将智能组件和哑组件保存在同一文件中,但是对智能组件使用默认导出,对表示/哑组件使用默认导出。 这样,您可以减少目录结构中的文件噪音。 还要按“视图”将组件分组,例如(管理=> [admin.js,adminFoo.js,adminBar.js],库存=> [inventory.js,inventoryFoo.js,inventoryBar.js等)。

dakt answered 2020-07-28T22:17:27Z
2 votes

我对组件目录没有强烈的意见,但是我喜欢将动作,常量和简化器放在一起:

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

我使用webpack为reducers.js加上别名,因此在容器组件中我可以reducers/

这样,应用程序中的所有有状态代码都位于一个地方。

请注意,只需创建reducers/目录(如actions/),就可以将reducers.js拆分为多个文件,而无需更改任何import语句。

w00t answered 2020-07-28T22:18:01Z
0 votes

在Redux中,您有一个用于操作的入口点(actions /文件夹)和一个用于归约器的入口点(reducers /文件夹)。

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

您将在哪里放置可重复使用的组件? 内部功能/域文件夹? 因此,如果您需要其他功能/域中的可重用组件,则需要在域之间创建依赖关系? 嗯,对于大型应用程序不是很好!

当您必须组合化简器时,域代码结构将取代以前提供的功能。

您仅为每个域/功能创建单个redux模块。在某些情况下,域代码结构应该很好,但这不是Redux。

luk_z answered 2020-07-28T22:18:39Z
-1 votes

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

leLabrador answered 2020-07-28T22:18:59Z
translate from https://stackoverflow.com:/questions/32634320/how-to-structure-redux-components-containers