ReactJS Flux应用程序目录结构

我的团队目前正在研究使用Facebook的Flux架构在ReactJS中编写的大型应用程序。目前它还处于初级阶段，但它很快就会变大。它将拥有超过50个小组件视图，大量行动，商店和行动创造者。ReactJS Flux应用程序目录结构

目前，我们的目录结构如下 -

App 
|___ module_1 
| |___ components 
| | |___ component1.react.js 
| | |___ component2.react.js 
| |___ module1ActionCreators.js 
| |___ module1Constants.js 
| |___ module1store.js 
| 
|___ module_2 
    |___ ... (same structure as above)

一个这种方法的问题是，因为这个应用程序的增长module_x文件夹将在数量越来越大。

有没有人有任何分享关于他们如何构建他们的应用程序？根据我们的经验，Facebook的示例应用程序（待办事项和聊天）具有适用于小型应用程序的架构，但一旦这些商店，组件和操作数量增加，就变得难以管理。

在此先感谢。

来源

2015-04-29 kalehv

如果某个组件足够普遍且足够可重用，那么将其分解到自己的npm模块中。如果您慷慨，请将其开放源代码并列在http://react-components.com/ –

我认为这是大型应用程序的发展方向。但是你的模块可能太小了。我的应用程序目前按类型排序，如@ fisherwebdev的答案和每个流量示例所示，但我相信这并不能很好地扩展。商店文件夹中已有25家商店。我打算'按功能排序'而不是'按类型排序'，这些功能中的每一个实际上都是一个小的“应用程序”，它将插入“核心”应用程序。这些应该只依赖于'核心'模块。但这只是一个想法。尚未设计。 – RoryKoehein

@RoryKoehein你设计了一些东西还没有尝试？我认为这是正确的方法。这就是我们如何做到的，除了我们在功能中再次按类型排序，导致只有少量文件存在的额外文件夹大量加载。 – froginvasion

通常的目录结构更是这样的：

 
js 
├── AppBootstrap.js 
├── AppConstants.js 
├── AppDispatcher.js 
├── actions 
│ ├── AppActions.js 
│ ├── FriendActions.js 
│   └── PhotoActions.js 
├── components 
│ ├── AppRoot.react.js 
│ ├── friends 
│ │ ├── Friend.react.js 
│ │ ├── FriendList.react.js 
│ │ └── FriendSection.react.js // a querying-view, AKA controller-view 
│ └── photos 
│  ├── Photo.react.js 
│  ├── PhotoCategoryCard.react.js 
│  ├── PhotoCategoryCardTitle.react.js 
│  ├── PhotoGrid.react.js 
│  └── PhotoSection.react.js // another querying-view 
├── stores 
│ ├── FriendStore.js 
│ ├── PhotoStore.js 
│ └── __tests__ 
│  ├── FriendStore-test.js 
│  └── PhotoStore-test.js 
└── utils 
    ├── AppWebAPIUtils.js 
   ├── FooUtils.js 
    └── __tests__ 
     ├── AppWebAPIUtils-test.js 
     └── FooUtils-test.js

CSS的目录通常看起来像部件目录的反射镜，每个部件的一个CSS文件。但是，现在有些人喜欢在组件上完成所有他们的样式内联。

不要总结所有这些 - 有而不是在商店和查询视图或“部分”之间始终是1：1，就像在此示例中那样。

真的，你只需要做适合你的应用的东西。这不是教条。数据流的东西，控制的反转和商店的解耦 - 这些比你组织文件更重要。

来源

2015-05-01 06:57:53 fisherwebdev

确实，其他的东西比文件夹结构更重要。另一方面，文件夹结构可以为您（或未来的开发者）提供一个很好的想法。我几乎认为文件夹/子文件夹/文件模型是不够的，并且提供更多灵活性的IDE可能是有用的（例如，文件夹图形而不是文件夹树）。 –

保证在这里以及：http://andrewcallahan.com/towards-a-simpler-react-folder-structure/ –

因此，等待......每当你使用一个动作，你必须导入'“../../ someActions“'？如果您需要使用任何实用程序，则需要使用几个文件夹。当然，它已经比我的文件夹结构更平坦了。 – froginvasion

我还在为大型应用程序的初始结构做出决定。在将应用程序分成基于助焊剂角色的文件夹（即动作，存储器，常量等）之后，我花了一段时间与你的结构非常相似。

首先，如果您使用的是类似Broswerify的东西，那么在您的require调用上的相对路径是可爱的。其次，当你在一个特定的组件上工作时，不必在各种文件夹中搜索文件是一个巨大的节省时间。

对于横切问题，如调度程序，帮助函数，引导程序等，我有一个等效的应用程序模块。对于我正在使用的每个文件而言，它总是觉得有一个明智的位置，而新开发人员并不努力查找相关文件（当模块可能共享前缀时出现问题）。

由于切换，我还没有回头。

来源

2015-06-17 20:40:20

ReactJS Flux应用程序目录结构

回答

相关问题