问题标签 [reactjs-flux]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
3132 浏览

reactjs - 通量多个商店实例

在数据按所有者 ID 划分为存储桶的 Flux 应用程序中,我们应该使用一个内部将数据分成存储桶的存储,还是每个存储桶一个存储实例?

例如,我们有一个应用程序用户,他是多名运动员的教练。每个教练的运动员有零个或多个锻炼,教练可以同时查看一个或多个运动员的锻炼。

我们可以为所有运动员开设一个健身商店;store 必须确保将所有数据分离到运动员存储桶中,并且每个 store 方法都需要一个运动员 ID 参数。

或者,我们可以为每个运动员 ID 提供一个商店实例。这简化了存储逻辑和方法签名,但是我们必须管理更多的存储实例。

有人对这种方法有任何经验吗?以一种或另一种方式做这件事有什么优点或缺点?或者,哪种方式是“通量方式”,为什么?

0 投票
6 回答
40514 浏览

javascript - 在 Flux 应用程序中应该在哪里发出 ajax 请求?

我正在创建一个具有通量架构的 react.js 应用程序,并且我正在尝试找出应该在何时何地从服务器请求数据。有没有这方面的例子。(不是 TODO 应用程序!)

0 投票
1 回答
3137 浏览

reactjs - Flux/React 复杂的可重用组件

我想做这样的事情

不同的应用程序

这是一个简单的自动完成(不是整个文件)

CountryAutoComplete 将是这样的自包含的东西。

根据 Flux 文档,看起来任何带有 API 调用的东西都需要通过

操作 -> API -> 调度程序 -> 商店 -> 组件

这使得 CountryAutoComplete 绑定到特定的应用程序,因为操作、调度程序和商店是特定于应用程序的。使该组件可跨应用程序重用的最佳方法是什么?

0 投票
2 回答
706 浏览

javascript - 在 Flux 架构中,谁负责向服务器发送更新?

所以在flux架构中,数据流如下:

所以假设视图是一个评论框。当用户提交评论时,会触发 addComment 操作,但是该评论应该发送到服务器的哪里呢?它应该发生在动作函数中,在调度它之前,还是商店应该在从调度程序接收到动作时执行它?

这两种情况似乎都违反了单一责任模式。还是应该有两个 CommentStore,一个 LocalCommentStore 和一个 ServerCommentStore 都处理 addComment 操作?

0 投票
2 回答
20213 浏览

javascript - Invariant Violation:当元素在 DOM 中时,目标容器不是 DOM 元素

所以我有一个使用 Backbone 路由器的反应应用程序,但是当我尝试导航时DOMContentLoaded,我得到:

我曾尝试单步执行堆栈跟踪,但无法弄清楚发生了什么,因为引发错误 ( ReactMount._registerComponent) 的方法被多次命中,前几个不会引发错误,因为 DOM 元素有问题。我正在使用我在其他项目中使用过的组件,没有问题,并且已经将所有部分剥离到最低限度来调试它(到目前为止没有成功):

DOM结构:

使用路由器代码:

登录表单组件:

路线被击中,LoginForm#render按预期被击中——我错过了什么?

这是堆栈跟踪,其底部是我的路由器登录方法:

谢谢阅读!

0 投票
2 回答
1311 浏览

javascript - 无法构建 Flux todo-mvc 示例

尝试从此处找到的 facebook 构建通量-todomv 示例: flux-todomvc

我已经运行安装了依赖项的 npm installed。

当我跑步时,npm start我回来了:

watchify -o js/bundle.js -v -d .

1655542 bytes written to js/bundle.js (3.51 seconds)

但是,bundle.js 文件尚未创建,当我打开 index.html 时,尝试获取 .html 时出现 404 错误bundle.js

有任何想法吗?

0 投票
1 回答
2423 浏览

javascript - 回流商店不听行动

编辑:

我现在觉得很傻。问题是我在代码中的任何地方都不需要我的商店,所以它实际上从未被创建。

当我调用它正在监听的动作时,我的回流商店没有调用它的回调。以下是相关代码:

行动:

店铺:

触发动作的组件:

Login当我在组件中提交表单时,该submit方法被调用而不会引发任何错误,但onCreateUser我的商店的方法永远不会被调用。

listenables回流 github 页面上的示例看起来相当简单,这与在商店中使用该属性的示例几乎完全相同。

任何帮助将不胜感激。

0 投票
1 回答
678 浏览

javascript - 如何使用 sinon 存根/模拟从“超类”复制的依赖项方法

我在测试不断变化的 Store 时遇到问题,想要删除调度程序。我已经看到它是如何用jest完成的,但我想用 sinon 达到同样的效果。

这就是我所拥有的

资源

库/调度程序。完整代码在这里

调度员

应用调度程序

ItemStore我要测试的那个

所以我想要存根的是 AppDispatcher.register。我怎么做?

我尝试了几种方法,最后一次尝试是这样的:

有人可以告诉我如何存根吗?

0 投票
2 回答
1961 浏览

reactjs - 在处理动作时调度进一步的动作

我有一个场景,我觉得我需要调度一个动作来响应另一个动作,但我不知道最好的解决方法。

为响应 HTTP 响应而调度操作,例如:

因为该响应是成功的,所以我想发送一个操作将用户发送到主页:

这对我来说似乎是一个明智的流程:这件事发生了,所以现在我希望这件事发生。麻烦的是,Flux Dispatcher 不允许这样做,因为我们仍处于调度周期中。我明白为什么在调度时调度是一个坏主意。

有些人已经通过多个调度程序解决了这个问题,而 Flux 作者似乎确信您只需要一个并且您需要重新考虑您的商店。

我看不出如何在不混淆意图的情况下重组我的商店以促进这一点。我UserStore知道auth行动,我RouteStore也知道navigate行动。任何关于如何改变商店以促进这一点的建议将不胜感激。

我觉得一个setImmediate会工作,但它似乎有点脏。我还认为排队操作的调度程序可能会有所帮助,但我可以从骨子里感觉到这可能会导致令人讨厌的问题。

最好的方法是什么?

0 投票
1 回答
2008 浏览

enums - 为什么 Flux 架构示例对操作类型使用常量而不是字符串?

在 Flux 架构的示例和解释中——Facebook 的 React 对应物——动作类型名称被引用为枚举常量而不是字符串。(请参阅http://facebook.github.io/flux/上的示例)我只是在寻找说明为什么这是首选方法。

我看不出在创作和便利方面有什么好处,因为无论您输入constants.actionTypes.UPDATE_DATA(枚举常量)还是'UPDATE_DATA'(字符串),您都必须知道并输入确切的名称。事实上,有时使用非字符串会增加复杂性——例如,您不能轻松地创建一个将动作类型作为键并将动作处理程序作为值的对象。

是组织、缩小还是其他方面的好处?我很好奇。