- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我的团队目前正在开发一个大型应用程序,该应用程序是使用 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 的示例应用程序(待办事项和聊天)具有适合小型应用程序的架构,但一旦这些商店、组件和操作数量增加,管理就会变得更加困难。
提前致谢。
最佳答案
通常的目录结构更像是这样:
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,如本例所示。
实际上,您只需要做适合您的应用的事情即可。这不是教条。数据流、控制反转和存储解耦——这些都是比如何组织文件更重要的想法。
关于ReactJS Flux 应用程序目录结构,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29945230/
我正在尝试构建一个应用程序 A(如适配器),它将: 1)接收带有某些 key (JSON格式)的POST请求 2) 它应该以某种方式修改该 key 并向另一个系统 B 创建 POST 请求。 3)应用
除了语义之外,是否有任何理由为 View 和服务器操作创建不同的调度方法?我见过的所有教程和示例(最值得注意的是 this )在监听已分派(dispatch)的有效负载时完全忽略源常量,以支持打开有效
我的密码 https://gist.github.com/ButuzGOL/707d1605f63eef55e4af 因此,当我收到登录成功回调时,我想进行重定向, 重定向也可以通过调度程序进行。 我
我试图找出使用 Flux 架构处理中型复杂应用程序中相当常见的情况的最佳方法是什么,当组成数据的模型之间存在依赖关系时如何从服务器检索数据。例如: 商店网络应用程序,具有以下模型: 购物车(用户可以拥
我有点坚持一项琐碎的任务:每当我使用响应式 spring WebClient 查询外部 API 或查询响应式 MongoDBRepository 时,我想记录有多少实体通过了我的通量,例如。记录消息,
我有这种情况。我有一个分页 API,它为我提供了过去 12 个月的数据。 API 的响应如下: public class PagedTransfersDto { private List cont
我有两个 Flux,一个用于成功元素,另一个用于保存错误元素 Flux success= Flux.just("Orange", "Apple", "Banana","Grape", "Strawbe
我现在正在使用 Flux .我想创建一个 Flux来自两个不同的对象 Flux .我知道我必须使用 BiFunction但我不知道怎么办。第一个对象对第一个对象有 PK,第二个 FK。我想压缩 PK=
我们正在重构一个大型 Backbone 应用程序以使用 Flux 来帮助解决一些紧密耦合和事件/数据流问题。但是,我们还没有弄清楚如何处理需要知道特定 ajax 请求状态的情况 当 Controlle
作为主题,Flux.concatMapIterable 和 Flux.flatMapIterable 都不会根据大理石图交错,这与 Flux.concatMap 和 Flux.flatMap 其中 f
我有一个flux这是由 Iterable 构建的8 个元素 ( Flux.fromIterable(..) )。对于每个通量排放,我想异步调用一个方法。我尝试了各种方法 dispatchOn和publ
Mono mono1 = repository.get(id); // data from reactive mongo Flux availabilityInfo = getAvailability
使用同构应用程序设置应用程序初始状态的一般做法是什么?如果没有 Flux,我会简单地使用类似的东西: var props = { }; // initial state var html = Reac
你好,我的代码是这样的: fun mapBatch(batch: List): Mono> ... fun myFun(stream: Flux): Flux { return stream
所以我从文档中了解到,并行 Flux 本质上是将通量元素划分为单独的轨道。(本质上类似于分组)。就线程而言,这将是调度程序的工作。因此,让我们考虑这样的情况。所有这些都将在通过 runOn() 方法提
我一直看到使用 flatMap 的例子对于 1 对 1 操作,例如: Flux.just("a", "b", "c") .flatMap(s -> Mono.just(s.toUpperCas
Flux.create 和有什么区别和 Flux.generate ?我正在寻找 - 最好是使用示例用例 - 了解我何时应该使用其中一个。 最佳答案 简而言之: Flux::create doesn'
我想发布 key 列表,但仅限于修改 key 时。 通过以下内容,即使没有任何更改,它也会以无限循环的方式发布值 RedisReactiveCommands commands = connec
我正在尝试从我从服务器获得的许多项目中实现无限滚动,但我找不到任何适当的方法来保持通量架构设计规则。 想法是:在第一次加载时,我从服务器获取完整的项目列表(只有 id),然后使用 ajax 每次获取
我有端点:/upstreams 它将返回以下格式的 Json: { "next" : "String", "data" : [ { "id" : "String",
我是一名优秀的程序员,十分优秀!