ReactJS Flux 应用程序目录结构

Question

我的团队目前正在开发一个大型应用程序，该应用程序是使用 Facebook 的 Flux 架构用 ReactJS 编写的。它现在还处于起步阶段，但很快就会发展壮大。它将拥有 50 多个小型组件 View 、大量操作、商店和操作创建器。

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

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 的示例应用程序(待办事项和聊天)具有适合小型应用程序的架构，但一旦这些商店、组件和操作数量增加，管理就会变得更加困难。

提前致谢。

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 文件。然而，现在有些人更喜欢在组件上内嵌所有样式。

不要想太多 - 商店和查询 View 或“部分”之间并不总是 1:1，如本例所示。

实际上，您只需要做适合您的应用的事情即可。这不是教条。数据流、控制反转和存储解耦——这些都是比如何组织文件更重要的想法。