问题标签 [refluxjs]

虽然我的场景非常具体，但我认为它说明了 Flux 中的一个更大的问题。组件应该是来自商店的数据的简单呈现，但是如果您的组件呈现有状态的第三方组件怎么办？如何在遵守 Flux 规则的同时与这个第三方组件交互？

所以，我有一个包含视频播放器的 React 应用程序（使用clappr）。一个很好的例子是寻求。当我单击进度条上的某个位置时，我想寻找视频播放器。这是我现在拥有的（使用RefluxJS）。我试图将我的代码剥离到最相关的部分。

我对这段代码的错误是当您尝试两次寻找同一个地方时。想象一下视频播放器连续播放。点击进度条进行搜索。不要移动鼠标，等待几秒钟。在与之前相同的位置再次单击进度条。的值data.seekTo没有改变，所以window.player.seek不调用第二次。

我已经考虑了一些解决这个问题的可能性，但我不确定哪个更正确。输入请求...

seekTo1：使用后复位

简单地重置seekTo似乎是最简单的解决方案，尽管它肯定不会更优雅。最终，这感觉更像是一种创可贴。

这就像...

2：创建一个更像是传递的单独商店

基本上，我会听 a SeekStore，但实际上，这将充当传递，使其更像是商店的动作。这个解决方案感觉就像是对 Flux 的破解，但我认为它会起作用。

window.player3：在我的行动中互动

当我想到它时，这感觉是正确的，因为调用window.player.seek实际上是一个动作。唯一奇怪的一点是，我觉得与window动作内部的互动不太对劲。不过，也许这只是一个不合理的想法。

顺便说一句，房间里还有一头我没有接触过的大象。在我的所有示例中，播放器都存储为window.player. Clappr 在旧版本中自动执行此操作，但尽管它已被修复以与 Browserify 一起使用，但我们继续将其存储在window（技术债务）中。显然，我的第三个解决方案是利用这一事实，这在技术上是一件坏事。无论如何，在任何人指出之前，理解和注意。

4：通过搜索dispatchEvent

我也知道调度自定义事件可以完成工作，但考虑到我有 Flux，这感觉很不对劲。这感觉就像我要跳出 Flux 架构来完成工作。我应该能够做到并留在 Flux 操场内。

我正在尝试对以下 React-Reflux 代码进行 es6 化：

资源

我不确定如何使用react-decorator进行转换。这就是我将其转换为：

它使用 babel 编译（stage设置为0），但效果不佳。任何建议如何解决这个问题？另外，是否可以 es6-ify 商店？

我想我可能在概念上遗漏了一些关于 React 和 Reflux 如何工作的东西。

如果我设置了一个对象（“项目”）的状态，当它呈现到屏幕上时（具有其现有属性），我如何使用相同的状态（和存储）来创建一个新项目？

这是我的项目视图中的一些代码：

这是我的项目商店中的一些代码：

然后，假设我单击“新建项目”，我使用以下代码：

我发现如果我从商店中删除“getInitialState”，那么当我去创建一个新项目时就没有问题了。但是，一旦我这样做了，我就不能再编辑我现有的项目，因为状态没有任何附加内容（我可以使用 prop 来查看，但这还不够。）

如果我保留“getInitialState”，我会收到一个错误：

我需要一个只有创建操作的“NewProjectStore”吗？我认为商店可以处理创建、获取、更新等。

我错过了什么吗？

我有一个组件（执行文本输入）在另一个组件中渲染了两次。

当我在其中一个文本输入组件中按下一个键时，每个都会收到通知......

该组件需要一个时间字符串，例如"14:30"，并且应该允许输入小时和分钟部分。

回流作用：

回流混合：

反应组件：

我从另一个 React 组件渲染了TimePicker两次......

...并且在"01"任何实例的分钟输入中键入时，我得到以下日志：

知道我做错了什么吗？

React鼓励尽可能多地使用无状态组件，并有一个有状态的父组件来管理它们。我知道这可以使无状态组件更加可重用，并且易于管理。但是，到了极点，我们总是可以把 state 放在最顶层的组件上，比如 App.js，通过一个长长的 props 链来传递信息和回调。如果使用 Flux，动作也总是可以在其中调度（通过回调执行）。

所以我想知道分离有状态和无状态组件的路线是什么？如果使用 Flux，Action 应该在哪里分派？

--- 添加一个例子 ---

假设我有一个像网络应用程序这样的谷歌文档，它有一个工具栏和显示的内容。我想我们会有组件结构。

工具栏有会影响显示内容的按钮，比如粗体文本按钮。

那么 App 应该将 onButtonPressed 回调 props 传递给 Toolbar 并自行调度 Actions，还是应该让 Toolbar 自己做呢？

App 应该将 contentString props 传递给 Content，还是让 Content 自己监听 Store 的变化？

谢谢！

我正在开发一个使用 React 和 ReFlux 的项目。目前我只有一家 ReFlux 商店：SubscriptionStore.js. 它包含有关用户订阅的简单详细信息，包括嵌套对象数组，其中包含附加到其订阅的每个“标题”的详细信息。

以下是背后数据的简单细分SubscriptionStore.js：

我有一个 React 组件，它允许用户更新现有标题的名称、添加新标题或删除标题。添加和重命名进展顺利，但删除行为不端，我敢肯定这是因为我还没有完全掌握 React/ReFlux。

以下是该主要组件的相关代码：

以及来自的相关代码SubscriptionStore.js：

问题

无论我单击要删除哪个标题，它始终是最后一个被删除的标题。如果我吐出this.subscriptions.accountTitles内容的前后，则表明确实从数据中删除了正确的对象，但 React 正在渲染元素，就好像它总是被删除的最后一个项目一样。

知道会发生什么吗？

我正在使用 react 和回流、react-router 和 browserify 构建前端应用程序。

我收到了一条控制台消息。

[object Object] 缺少监听方法

你知道为什么我有这样的例外吗？

零件

});

店铺

行动

识别触发状态更改的组件的规范 React+Flux 方法是什么？

我有一个允许用户使用 HSL 颜色空间创建调色板的应用程序。

这是我的应用程序的组件结构：

下面看一下ColorPicker组件：

每个都ColorPicker包含 3 个Slider组件，它们触发更新商店的事件。商店然后更新调色板并将整个调色板向下传递给Container组件，组件将其向下传递props给它的子组件。

这是我处理滑块更改事件的函数Store（我正在使用 Reflux）：

我的调色板是一组 HSL 颜色值，例如：

[ [350, 100, 50], [340, 100, 40], ... ]

“颜色”是上述 3 项数组之一，我将颜色数组中的每个项称为“颜色部分”，因为它代表颜色的 H、S 或 L。

将颜色和颜色部分索引作为道具向下传递似乎不雅。我目前正在构建这样的组件：

据我所知，我需要colorIndex作为道具传递，以便我的子组件可以知道它映射到调色板中的哪种颜色，以便我可以将该知识传递给商店。

什么是惯用的 React+Flux 方式来做到这一点？

我创建了一个非常大的（500loc，它非常大且难以推理）反应类。它是一个自动完成功能。用反应/回流将其分开的推荐方法是什么。将逻辑添加到 som 服务？什么是最佳做法。我有商店，但据我了解，它们不应包含视图逻辑。

到目前为止，我对如何通过参数将属性从一个组件传递到另一个组件的了解程度如下

//开始：我的知识范围

假设存在一些topic在 A.jsx 中调用的状态变量。我想把它传递给 B.jsx，所以我执行以下操作

在 B.jsx 中，我可以做类似的事情

调用时将呈现“今天的主题是天气！”

//结束：我的知识范围

现在，我正在阅读有关 react-router 的教程，其中包含以下代码片段

主题.jsx：

路线.jsx：

header.jsx：

wherethis.state.topics是通过 Reflux 从 imgur API 中提取的主题列表。

我的问题是：通过什么机制params传递给propstopic.jsx？在代码中的任何地方，我都没有看到上面关于“我的知识范围”部分所表达的习语。<Topic params = {this.state.topics} />在 routes.jsx 或 header.jsx 中都没有。链接到这里的完整回购。React-router 文档说 params 是“从原始 URL 的路径名中解析出来的”。这并没有引起我的共鸣。