ReactJS Flux应用程序目录结构 [英] ReactJS Flux Application directory structure

问题描述

我的团队目前正在使用Facebook的Flux架构开发使用ReactJS编写的大型应用程序。目前它仍处于起步阶段，但很快就会发展壮大。它将具有50多个小组件视图，大量动作，存储和动作创建者。

My team is currently working on a large application being written in ReactJS using Facebook's Flux architecture. It is still in its infancy right now but it is going to grow big very soon. It will have more than 50 small component views, plenty of actions, stores and action-creators.

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

Currently, our directory structure looks like -

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

此方法的问题之一是，随着该应用程序的增长，module_x文件夹的数量将变得越来越大。

One of the problems with this approach is that module_x folders will become increasingly large in number as this app grows.

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

Does anyone have anything to share about how they structured their app? In our experience, Facebook's example apps (todo and chat) have an architecture suited for small apps but once those stores, components and actions grow in number, that becomes harder to manage.

预先感谢。

推荐答案

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

The usual directory structure is more like this:

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目录通常看起来像components目录的镜像，每个组件有一个css文件。如今，有些人更喜欢在组件上内联所有样式。

The css directory usually looks like a mirror of the components directory, with one css file per component. Some folks these days prefer to do all of their styling inline on the component, however.

别想太多了-没有 在商店和查询视图或区域之间始终保持1：1，如本例所示。

Don't overthink all that -- there is not always a 1:1 between stores and a querying-view or "section", as there is in this example.

实际上，您只需要做正确的事情即可为您的应用。这不是教条。数据流，控制权的反转和商店的解耦-与您如何组织文件相比，这些要重要得多。

And really you just need to do what is right for your app. This is not dogma. The data flow stuff, the inversion of control and the decoupling of the stores -- these are much more important ideas than how you organize your files.

这篇关于ReactJS Flux应用程序目录结构的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！