ReactJS Flux Application目录结构

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.

而且你真的需要做适合你的应用程序的东西.这不是教条.数据流的东西,控制的反转和商店的分离 - 这些是比组织文件更重要的想法.