Question

我的团队目前正致力于使用Facebook的Flux架构在ReactJS中编写大型应用程序。它现在还处于起步阶段，但很快就会变大。它将拥有超过50个小组件视图，大量动作，商店和动作创建者。

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

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的示例应用程序（todo和聊天）具有适合小型应用程序的架构，但一旦这些商店，组件和操作数量增加，就会变得难以管理。

提前致谢。

Answer 1

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

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或者＃34;部分＆＃34 ;,因为这里有示例

实际上，您只需要为您的应用做正确的事情。这不是教条。数据流的东西，控制的反转和商店的分离 - 这些都是比组织文件更重要的想法。

Answer 2

我还在努力决定大型应用程序的初始结构。在将应用程序分成基于通量角色的文件夹（即动作，存储，常量等）后，我结构与您的结构非常相似。

首先，如果你使用像Broswerify这样的东西，你的需求电话的相对路径是可爱的。其次，在处理特定组件时，不必在各种文件夹中搜索文件可以节省大量时间。

对于横切问题，如调度程序，辅助函数，引导程序等，我有一个等效的App模块。对于我正在使用的每个文件，总觉得有一个合理的位置，新的开发人员很难找到相关文件（当你的模块可能共享前缀时会出现问题）。

由于转换我没有回头。

ReactJS Flux应用程序目录结构

2 个答案: