问题标签 [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.
stream - 流如何适应 Flux 应用程序?
我有一个 webapp,它打印在服务器上运行的命令行程序的输出。此输出使用RxJS 流( source ) 发送。
我试图用 Flux 架构(来自 ReactJS 人员)重构这个应用程序,它强制应用程序流向一个方向:
而且我不确定我应该如何在这个 Flux 应用程序中使用流:
每个流事件都应该向 Dispatcher 触发一个新的 Action 吗?还是我应该在商店里收听流并跳过调度程序?
由于 ReactJS 在虚拟 DOM 上重新渲染,恒定流输入会破坏我的应用程序吗?
我在 Flux 视频中听说 Dispatcher 会忽略在前一个操作完成之前收到的新操作,这是否意味着如果我的流创建的操作过于频繁地触发事件,它可能会被忽略?
reactjs - React-router:通过路由传递数据
我试图找出通过我的路线传递数据的最佳方式。我知道我可以使用参数,但某些类型的数据不属于参数。
例如:我有一个显示应用程序列表的索引页。每个应用程序旁边都有一个按钮,可将您引导至该应用程序的视图。
我想将应用程序本身传递给应用程序处理程序。但是,通过 params 传递整个应用程序是没有意义的。尽管将应用程序标识符传递给参数(即:id 或 :name)确实有意义
所以我认为我应该这样做的方式是将应用程序标识符传递给参数,然后在应用程序组件中搜索我的 ApplicationStore 以获取给定标识符的适当应用程序。
但是,通过应用程序本身不是更容易更快吗?有没有办法做到这一点。有理由不这样做吗?
这是一些代码:
<Link to="showApplication" params={{name: application.name}}>View</Link>
或者
<Link to="showApplication" params={{application: application}}>View</Link>
提前致谢!
javascript - 动态插入的 React 组件
我正在 React/flux 中构建一个所见即所得的工具,您可以在其中通过将元素拖放到页面上来构建界面。例如,我有一个可放置元素的列表:列表、表单、输入框、文本框等。当用户在页面上放置其中一个元素时,我需要插入相关的反应组件(并且我存储了一个名称他们丢弃的对象的属性,所以我会知道我需要的组件名称)。因此,如果用户将列表拖放到页面上,而我的关联组件标签是<list />
,我不能这样做 <{component.name} />
,它会将其变成<list />
......但我需要这样做的方法。有什么想法吗?
reactjs - React 和 Flux:处理 Aync 调用
我有一个反应组件 - 用户可以在其中创建应用程序的页面。当他们单击创建时,我会进行异步调用。如果异步调用成功,那么我会让调度员知道该操作。否则,如果我收到错误消息,我不会通知调度员而是呈现一些错误文本。
这是其他人将如何处理这种情况的方式吗?我认为这是正确的方法,但我的一部分认为调度程序应该处理异步调用。但是,我不确定如何通知视图发生了错误。我可以重新渲染视图并将错误作为道具传递,但这种方法似乎增加了太多复杂性。
谢谢!
reactjs-flux - 反应调度员等待
我正在尝试使用 react.js 的 waitFor 功能,但似乎我做错了什么。
我想做的基本是等待一家商店被填满,然后再从另一家商店打电话给它。1.在第一店注册token
2.写在其他商店的等待
不幸的是,我的 getall() 方法返回一个空对象(getAll() 写得很好)。所以看起来 waitFor 调度程序功能不起作用。
基本上我知道这是因为第一家商店仍在接收来自服务器的答案,但我认为 waitFor 会等待它被提取我不明白。
有什么线索吗?谢谢!
编辑:我解雇了第一家商店,就像那样。我不明白的是,一旦我的骨干集合已获取,我将分派负载(我以承诺成功分派......)
我还尝试将 waitfor 绑定到一个从未调用但另一家商店仍未等待的动作!诡异的 !
reactjs - 是否将从 Store 检索到的数据保存在控制器视图中?
根据 React 文档,状态应该仅用于 UI 状态,因此从 Store 检索的数据是否是 UI 状态令人困惑。
假设我们从 Store 中获得了一个项目列表,并且需要将它呈现给组件。应该是:
- 存储为状态
- 存储在组件的属性中(需要
forceUpdate
)
我还可以考虑在方法内从 Store 检索数据render
,这根本不需要将数据保留在组件内,但仍然需要forceUpdate
在 Store 更改时调用。
javascript - 如何使用flux/reactjs减少控制器视图中的渲染调用
我正在使用 React Flux 架构开发项目。我的控制器视图看起来像
我在渲染函数中有一些嵌套视图,并且在某些视图中所做的每一个更改都会导致控制器视图渲染函数运行。这会导致所有嵌套组件的渲染功能也运行,但唯一的变化将在 UserControl 组件上。我不需要运行所有嵌套组件的渲染函数。
我该如何解决?
它是通量架构的行为吗?
如何减少渲染函数调用的次数?
javascript - EventEmitter 与 facebook 的调度程序
我正在使用对 Flux 架构做出反应。
我在网上读到为了定义商店,我必须做这样的事情:
据我了解,EventEmitter 和 facebook 的 dispatcher 有很多共同点。例如,两者都可以发出(或分派)一个事件。
我的问题是为什么我需要 EventEmitter 和调度程序?不是多余的吗?创建一个包含 EventEmitter 所需行为的调度程序不是更好吗?
reactjs - 在商店中触发操作是不好的做法吗?
存储应该处理由操作触发的事件并将更改发送到侦听视图控制器。
他们是否也可以触发操作,例如在请求的回调中或直接在商店的注册回调中。
例如:
Flux 架构中这样的代码是否“正确”?
谢谢 !
====== 根据评论更新:
这不是“我需要这样做。我该怎么做?”的问题,而是“这应该是一种做事方式”的问题。我猜答案是......它是你的选择。
在评论中添加了一些有用的链接,谢谢。
我对事物的理解如下:
在 Flux 架构中,视图应该是唯一触发动作的视图。将异步请求放入您的操作创建器中,回调应该启动一个新操作。
当不遵循 Flux 步骤时,store 也可以处理异步请求,但要确保回调不直接处理数据,而是触发另一个动作。请参阅 Bill Fisher 对此的回答。
在任何情况下,正如 Ben Alpert 的回答所说,您可以为用户操作创建多个操作(例如:REQUEST_START、REQUEST_SUCCESS、REQUEST_ERROR),这允许您连接到请求的不同阶段。
欢迎对此进行任何更新。
zurb-foundation - Facebook ReactJS 和 Zurb Foundation for Apps?
我喜欢 Zurb Foundation(SASS,尤其是 Zurb Foundation for Apps),但想将它与 Facebook ReactJS 和 Flux 一起使用
那就是删除 AngularJS 并用 ReactJS / Flux 替换它。Kiran Abburi 为实现这一目标开了个好头:
https://github.com/akiran/react-foundation-apps
http://webrafter.com/opensource/react-foundation-apps
人们如何看待像这样使用带有 Facebook ReactJS / Flux 的 Zurb Foundation for Apps 的长期可行性?
从技术和生态系统的角度来看(例如更新)。
或者,像 Zurb Foundation(或 Twitter Bootstrap)这样的 CSS 框架是否真的对 ReactJS / Flux 有益。
谢谢,阿什利。