问题标签 [refluxjs]
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.
javascript - React Reflux:onUpdate#this.trigger(rows) 导致无限循环
我有一个显示单选按钮的 React 组件。对这些的更改应由 Reflux 处理。据我了解,this.trigger(object)
应该调用它来保存对对象的任何更改。不幸的是,这会导致无限循环。
我在这里发布了一个演示错误的 JSFiddle。谁能看到我做错了什么?应该如何onUpdateAutoComplete(checked)
制作?
复选框组件
onUpdateAutoComplete
干杯,马丁
javascript - 使用 React 和 Reflux 更好地使用一些大型或多个小型商店
不久前,我们开始使用我们的第一个基于 Web 的单页应用程序。我们从 React 和 Flux(Facebook 实现)开始,但最近切换到 Reflux 来实现 Flux。虽然 Fb Flux 实现知道“命名”商店事件的概念,但这个概念在 Reflux 中不可用。因此,每个监听 store 的组件总是对所有事件做出反应。下面的参考图像显示了我们的用户界面的复杂性。
如您所见,我们有很多重复的组件(具有相同类型信息的多个选项卡、具有客户详细信息的多个组件以及具有详细信息的多个重复列表(甚至嵌套)。
此应用程序是现有 .Net 应用程序的新前端 (UI),它维护所有 te 数据(已打开的发票等)。Web 应用程序可以通过使用 Web 服务(MVC Web API 2)与此后端进行通信。
鉴于图片中显示的用户界面,我想知道我是否可以更好地为每张发票保存所有发票数据的商店(以及引用所有发票数据的聚合商店),或者为每张发票保存的商店只有发票标题信息和一些其他存储每个详细信息窗格的信息。
提前感谢您的反应和建议!
javascript - Reflux connectFilter 仍然向所有监听组件发送更新
我正在使用Reflux.connectFilter mixin 让一堆 Graph 组件监听我的 GraphStore 中的变化。使用过滤器,它们应该只在 GraphStore 的图形数组中与其 ID 匹配的元素发生更改(或添加/删除)时重新渲染。但是,当我更新数组的单个元素时,比如通过设置名称变量,我仍然看到所有正在监听的图表重新呈现。难道我做错了什么?
图形存储
图形
仪表板
javascript - 使用reactjs,更新列表中的项目而不更新整个列表?
我正在使用 React 和 Reflux。而且我很难弄清楚如何更新评论列表中的一条评论。
我对国家应该去哪里感到困惑。我把状态放在评论列表的顶部。以 React 方式思考。然后 CommentsItem 只是道具。然后每个 CommentsItem 都有一个 LikeButton,我也做了道具。
问题是当我在 LikeButton 中调用 like 操作时,它会重新加载 CommentsStore 中的所有评论。我猜我需要一个新商店来加载一条评论而不是所有评论?但这是否意味着我将状态置于 CommentsItem 中?我对这里的最佳实践有点困惑。
这就是我正在使用的:
<ProfilePage />
<CommentsList />
<CommentsItem />
<LikeButton />
javascript - 对于 Reflux,一个资源有 2 个商店还是 1 个商店?(自行车/CurrentBike 与自行车)
我仍在尝试围绕前端状态。是否有为资源设置商店的通用最佳实践?例如,我的 web api 有:
我从一个 BikeStore 和bikes: []
. 现在我正在研究 ShowBike 组件,不确定是否应该使用 BikeStore(不完全确定如何)或为单个项目创建第二个商店。
jasmine - 用 Jasmine 测试 Reflux 商店
我试图弄清楚如何使用 Jasmine测试 Reflux 商店( https://github.com/spoike/refluxjs )。runAllTimes
基本上,这个问题的等价物,除了我所知道的没有等价物: How to test Reflux actions with Jest
^ 这失败了,它应该返回 true。
所以:有人知道如何使用 Jasmine 测试 Reflux 商店吗?
javascript - Reflux Stores - 避免回归问题/命名冲突
我们正在构建一个相当复杂的 React + Reflux 应用程序,并有几个商店来监听来自其他组件的一些操作。例如:
由于以下几个原因,我认为这种方法并不理想:
- 扩展 BarActions 时,您可能会在不知不觉中引入与 Foo 动作同名的动作,这将导致回归错误
- 读取 FooStore 中的代码时,哪些函数与 BarAction 相关并不一定很明显
- 如果您知道命名冲突,那么您需要创建过于冗长的操作
我怎样才能避免这些问题?
编辑
我目前避免这些问题的方法是明确说明商店在其主要事件源之外正在监听哪些操作:
javascript - 回流商店在一种情况下不听动作
我有一个 Reflux 商店正在收听“customerLoaded”操作。此操作向商店提供客户详细信息。当商店收到新的或更新的客户信息时,它会被触发以通知监听组件新的或更新的客户详细信息。
(所有代码都已从荷兰语翻译成英语,因此可能有一两个错字)
我有我的反流动作。
使用 setEmail 操作时会出现问题。实际上,此操作按应有的方式工作,并且电子邮件地址已在服务器上更新。甚至触发了从服务器重新加载客户详细信息的操作,但是在 loadCustomer.preEmit 中,触发“CustomerActions.customerLoaded(data)”操作时没有任何反应。CustomerStore 不响应此操作。'data' 参数包含预期的数据,所以这不是问题。
最奇怪的是,最初在屏幕上显示客户详细信息时,使用了相同的 CustomerActions.loadCustomer 和 CustomerStore 组合,没有任何问题。当我用它来显示不同客户的详细信息时,这种组合也仍然有效。
有没有人知道可能是什么问题,或者我可以做些什么来检查商店为什么不响应行动?
提前致谢!
javascript - 从父 React 刷新子状态
我有一个包含一些数据的表,表中的每个元素都是一个 React 类组件。它看起来像这样:
我想要的只是有一个用于“全选”功能的复选框(左上角复选框)。问题是我不知道如何解决这个问题,因为props
and state
。
我在单元素组件中有这样的代码:
而且我知道我不应该从中获取checked
参数,props
但这只是暂时的。
我遇到的问题是:当我更新checked
父级中的参数时,它不会更新状态,因为getInitialState
在刷新后不会调用(是的,我知道它应该是这样的)。
我的问题是:我可以以某种方式更新子组件的状态吗?或者这是实现这一目标的更好方法。
reactjs - React+Reflux 存储和组件应该如何使用 ajax 处理 onChange 按键
我需要一些帮助来了解我正在进行的反应/回流模式,如果它可以接受的话。
我有一个表单组件,它呈现几个表单元素,例如下面的示例。表单组件连接到 Reflux Store,表单元素的数据位于其中。
在给定的示例中,用户在字段中输入,这反过来会触发 ajax 请求来保存数据,通常以状态码 200 响应。
完成后我应该
this.trigger
在我的商店里吗?这将导致setState
在每次去抖动按键时调用表单。那不好吗?我是否可以从商店触发事件,例如
Actions.FieldUpdated
并在字段组件中收听?
有几个使用提交按钮更新事物的反应/回流示例,但我找不到任何使用 onChange 的示例。