问题标签 [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.

0 投票
4 回答
18653 浏览

reactjs - React + Flux - 存储数据应该存储在组件状态还是道具中?

如果通量存储是维护数据状态的单例,为什么组件在访问存储时使用 setState 而不是 setProps?这不只是意味着我开始将应用程序状态保存在两个(或更多)地方吗?

Flux / React 文档和示例似乎都将 setState 作为首选解决方案,但我在工作中与几位同事进行了有趣的对话,并想知道是否有其他人遇到过这个问题

编辑:您可以在此网址中看到我在说什么: https ://github.com/facebook/flux/blob/master/examples/flux-chat/js/components/ThreadSection.react.js

注意 ThreadSection 是一个子组件,它直接从存储中获取数据并将其用作状态。

如果您遵循 React “方式”,我会期望状态由商店管理 - 而不是子组件。

我们想到的解决方案是获取顶层组件中的所有存储(作为道具),并根据需要将它们传递给子组件。但这很快就会变得相当丑陋。

我们这样做是因为 setProps 不适用于子组件

0 投票
1 回答
2423 浏览

javascript - 回流商店不听行动

编辑:

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

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

行动:

店铺:

触发动作的组件:

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

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

任何帮助将不胜感激。

0 投票
1 回答
256 浏览

javascript - Uncaught TypeError: undefined is not a function in RefluxJS

按照本网站的教程:http ://blog.krawaller.se/posts/the-reflux-data-flow-model/

我正在考虑替换var chatRef为虚拟数据,而不是new Firebase(...)如作者示例中所示使用。困惑这行到底是怎么读的?

什么是“价值”以及如何bind运作?

试图使用 varchatRef = {0: "Hello", 1: "Hello"}生产Uncaught TypeError: undefined is not a function

0 投票
2 回答
2842 浏览

reactjs - 在回流中,我如何从 asp.net web api 获取数据

我正在使用reactjs的回流。从 Store 的回流操作中,我编写了一个从 asp.net web api 获取数据的操作,我认为这是获取用于 ajax 的数据的唯一方法,有人跟我说,我可以使用插件 jquery 获取数据,但我没有'不要相信它,因为 $.ajax 是最好的方法。我在谷歌上搜索所有内容,但我看不到解决这个问题。如果您知道要解决的问题,请与我分享,我真的很感谢。

此外,我对 ajax 的全局和局部变量有疑问。请查看我的代码,您可以看到从不返回值的粗体文本,与成功块有关的问题,列表变量在块外时不会更新。那有什么问题?我该如何解决这个错误?

再一次非常感谢你!

0 投票
1 回答
4271 浏览

reactjs - 如何使用 Reflux 商店处理分层数据?

大纲

在我的应用程序中,我使用ReactReflux,并且对我的数据进行了分层设置。我正在尝试将我的应用程序的元素分解为单独的商店,以便能够正确挂钩事件并分离关注点。

我有以下数据流:

Workspaces -> Placeholders -> Elements

在这种情况下,创建工作空间时,必须依次创建默认占位符,并使用对新创建的工作空间的引用 (ID)。这同样适用于占位符与元素的关系。

关键

Reflux 方式似乎建议 PlaceholderStore 监听来自 WorkspaceStore 的触发器,将新创建的 ID 添加到this.trigger().

Reflux 只允许从商店触发单个事件;从而防止外部组件能够识别createupdate采取行动。这意味着如果商店中的一个触发器将 ID 发送为argument[0],则后续触发器应该执行相同的操作(以保持一致)。对于寻找多个工作区的更新(例如重新排序/批量更新)的组件来说,这是一个问题。

不受欢迎的解决方案

我曾想过添加一个概念StoreActions;只有商店可以创建的操作,然后其他商店会监听(有效地从商店丢弃原始触发器)。有了这个组件/商店可以监听特定的事件,传递给所述事件的参数可以被定制而无需担心。这似乎是一种错误的方式,也是对 Reflux 事件系统的滥用。

帮助

我应该尝试分解相关数据吗?有没有更好的方法来构建数据?

我已经阅读了有关聚合存储的信息,但没有看到任何要剖析的实现。这些是否提供了一个解决方案,将来自多个商店的数据整合在一起,如果是,那么是什么负责创建 React 组件可以监听的事件?

非常感谢任何人都可以提供的任何帮助/见解!

0 投票
1 回答
4012 浏览

reactjs - React+Reflux:将变量传递给数据存储

我正在构建一个 React+Reflux 应用程序,除其他外,它允许创建/删除/编辑类别。到目前为止,我能够显示所有类别并通过关联的存储和操作在 React 组件中处理类别的创建/删除。这一切都很好,更新数据库并按预期重新渲染组件。我的症结在于试图深入研究特定的现有类别以对其进行编辑。

我需要以某种方式将类别 ID 传递给商店,然后商店将通过 ajax 调用将其传递给 php/sql 查询,以便获取/设置特定于该特定类别的数据。如果我完全绕过商店并将ajax调用放在组件本身中,我可以通过带有React-router的url参数让它工作(当然没有自动重新渲染)但我无法弄清楚如何通过商店做到这一点。

换句话说,这或多或少有效:

  • “ManageCategories” React 组件,它使用 CategoryStore 列出所有类别,每个类别都包含在一个锚标记中,该锚标记将类别 ID 传递给“ManageCategory”路由/组件
  • “ManageCategory”组件在其 getInitialState 方法内的 ajax 调用中直接使用类别 ID 参数来显示特定于类别的数据

但是,我认为下面是更正确的 Reflux 方法,但我不确定如何让它工作:

  • “ManageCategories”组件同上
  • “ManageCategory”组件以某种方式将其类别 ID 参数传递给 CategoryStore(或者可能是不同的“IndividualCategoryStore”?),该组件仅返回特定于该类别的数据并处理对该类别的更新/编辑

通过向 CategoryStore 添加一个新方法(“getCategoryData”),该方法在“ManageCategory”组件的 getInitialState 方法中调用并传递了 categoryId 参数,我能够获得这种工作的一种笨重版本。这会导致所有类别(来自 CategoryStore 的 getDefaultData)的闪烁,然后是正确的单个类别列表(来自组件的 getInitialState)。

我对 React+Reflux 背后的概念感到相当满意,但在这一点上,我认为我可能误解了一些基本的东西。在这个特定问题上工作了一个多星期,但我发现的示例/教程/文档都没有解决将变量传递到数据存储的具体问题。

行动:

分类商店:

类别组件:

管理类别组件:

提前感谢您的任何见解或帮助。

0 投票
1 回答
265 浏览

reactjs - 在回流中,不能通过全局变量重用组件

我正在尝试为我的项目构建用于回流模型的项目,如您所知,回流有:

  • 在 components/register.js 中,我创建了一个带有代码的 global.RegisterForm:

(function(React, global) {
global.RegisterForm = React.createClass({
render : function() { return <h2>Register Form</h2> } }) })(window.React, window);

  • 测试.html:

你认为没有路由器回流的这个错误是因为我参考了有路由器的回流todo样本吗?

谢谢

0 投票
1 回答
144 浏览

reactjs - 动画数据存储更改

我有一个商店,它的数据每秒增加 1。

我希望我的组件为一个矩形设置动画,随着数据的增加“水平填充”,基本上:

问题是我的商店没有通过这个“值”(0、0.2、0.5),而是每秒增加 1。

那是我的问题-> 存储数据不通过其间的值,因此,如果我的组件宽度接收数据,它显然只会在宽度上跳跃。

我正在考虑在渲染循环中设置状态,以便我可以手动减少状态变量。但是这是不可能的,因为我不能在渲染循环中调用 setState。

我应该如何在 ReactJS 中处理这个问题?使我的数据变为中间值(0.2、0.5...)似乎很糟糕,因为它更像是 UI 而非数据。

0 投票
2 回答
4324 浏览

javascript - 初始化数据的正确方法

使用 RefluxJS 初始化数据(异步)的正确方法是什么?是否有类似于 AngularJS 的解析,或者 Flux 实现与此无关(路由器应该处理此责任)?

0 投票
2 回答
2503 浏览

javascript - 未正确触发 React 事件

我有一个 Reflux 商店,它在触发操作时似乎会导致错误:

当操作load被调用并且onLoad方法触发时,它在this.triggerChrome 的方法上失败,错误是Uncaught TypeError: Cannot read property 'apply' of undefined

调用堆栈最终将我带到了 Reflux 监听方法:

这是 callback.apply 中的回调,但看起来由于某种原因该回调未定义。

我显然做错了什么来触发如此严重的错误,但我不知道是什么。有人能告诉我我在商店做错了什么吗?

调用 store 的代码是这样调用它的: