问题标签 [flux]

我将按照以下视频中的“容器和组件”方法在 Flux 架构中构建可重用组件。

React.js Conf 2015 (22m 50s): https://youtu.be/KYzlpRvWZ6c?t=22m50s

例如，我正在构建一个带有“下一步”按钮的图像滑块。

ImageSliderContainer

• 监听ImageSliderStore并维护状态（例如，currentIndex）
• 使用道具渲染ImageSlider

图像滑块

• 无状态组件，只是基于 props 渲染
• 有一个子组件NextButton

下一个按钮

• 无状态组件，只是基于 props 渲染
• 有 onClick 事件

在 Flux 架构中，单击NextButton将向商店发送操作。然后，商店将更新“currentIndex”并发出更改事件。在我看来，ImageSlider不再可重用，因为它与单个存储紧密耦合，通过该存储将通知单个容器。

另一种选择是将状态“currentIndex”添加到ImageSlider组件。单击NextButton将通知ImageSlider更新其状态。但这会引入从NextButton到ImageSlider的反向数据流（违反 Flux 架构？）。此外，它反对“容器和组件”方法，其中组件仅使用道具呈现 UI。

在 Flux 架构中制作可重用组件的最佳方法是什么？更具体地说，哪个元素（商店、容器、组件或其他）应该处理NextButton组件内发生的 onClick 事件？

已编辑

根据答案，这是一个同时满足 Flux 架构和“容器和组件”模式的解决方案。

• 容器拥有状态“currentIndex”。该应用程序可能有多个容器，例如ScreenshotSliderContainer和DebugSliderContainer，每个容器都维护自己的“currentIndex”。
• 容器将 onClick 处理程序作为道具传递给组件ImageSlider 。onClick 处理程序将操作发送到商店。
• ImageSlider组件是无状态的，将 onClick 处理程序传输到子组件NextButton。
• 因此，NextButton中的 onClick 事件不会影响顶部组件ImageSlider。只有容器使用新的道具渲染ImageSlider 。

我很想将错误数据添加到商店。例如，

在应用程序中出现错误时，操作将通过调度程序更新错误，并且错误面板将显示给用户。错误面板的渲染通过测试错误消息状态有条件地显示 div。

在下一个用户输入时，一个动作，即 userAction，模型状态将由调度程序更新。问题：仍然会显示错误面板，因为错误消息状态不是“重置”。

userAction 将设置其他非错误状态。Flux 将针对此更改发出更改。然而，如果我遵循 Flux 模型，也应该在此操作中重置错误，但这会导致发出通知，通知 UI 进行更新。似乎不正确。

我的想法是：1.不要把这种东西放在店里？或者， 2. 商店将为每次非错误状态更新重置错误状态。或者，3. 每个动作还将包含一个用于任何状态更新的错误状态对象。

目前我的解决方案是清除存储功能中的错误数据：

这样做的非白痴方式是什么？我是 React 和 Flux 的新手，所以我确定这是新手问题。我使用McFly作为 Flux 实现。

我有一个使用多个数据标签页的 React + Flux 应用程序。每个标签页显示相同类型的数据（例如发票），但来自另一个对象。根据我阅读的有关此主题的其他帖子，我决定在“InvoiceStore”中创建一个集合，其中包含显示发票的每个标签页的“发票”对象。

在每个选项卡上（在发票的详细信息中），都有多个类似小部件的组件。这些组件嵌套在多个层中。

挑战在于每个组件都应该知道必须为哪个发票对象显示数据。我知道我可以通过将数据（实际数据或发票集合中项目的“键”）从发票（选项卡）的顶部组件传递给它的每个后代来安排，但这意味着组件在中间需要将收到的属性传递给它的孩子。这对我来说似乎有点矫枉过正。

是否有可能拥有某种范围为一个组件及其后代的变量？还是有另一种“标准化”解决方案来应对这一挑战？

非常感谢您的建议！

我试图找出在添加新项目时更新存储数组的最佳方法。

现在我正在使用下面的代码对其进行排序（在 AppDispatcher.register 代码中调用 sortMissions()），但感觉效率低下，因为每次调用我的一个 switch 案例时数组都会被排序，即使它与_missions 数组（例如，如果 _incomplete_missions 发生变化，我仍将排序 _missions）。

我想过只在 MissionStore.getMissions() 中对 _missions 进行排序，而没有在其他地方排序，但这将导致每次调用 getMissions() 时都会对其进行排序，无论是否发生任何变化。

我还考虑在 _missions 会更改的每个调度程序案例中插入 sortMissions() ，但这似乎是我在复制自己。

理想情况下，我只想订阅 _missions 数组（来自同一商店内）的更改，并仅在 _missions 更改时对其进行排序，但我不确定我将如何做到这一点。

谢谢！

我使用 Reflux，通常我在进行 ajax 调用后触发，并且效果很好。出于测试目的，我不需要 ajax 调用，并且我注意到除非我给出 5 毫秒的超时时间，否则触发器将不起作用。这是工作和不工作的例子。

不工作的例子：

这将起作用：

你能解释一下为什么它不能立即工作吗？应该这样做吗？这是一个错误还是我不明白的东西。

我试图理解通量模式。

我相信在任何好的设计中，应用程序都应该由相对独立和通用（因此可重用）的组件组成，这些组件通过特定的应用程序逻辑粘合在一起。

在 Flux 中有封装数据和域逻辑的域特定的 Store。这些可能会在同一域的另一个应用程序中重用。

我认为还应该有特定于应用程序的商店来保存应用程序状态和逻辑。这是胶水。

现在，我尝试将其应用于虚构的“GPS Tracker”应用程序：

...

当用户点击 [Stop Tracking] 按钮时，相应的 ViewController 会引发STOP_CLICK.

• AppState.on(STOP_CLICK):

  • dispatch(STOP_GEOLOCATION)
  • dispatch(STOP_TRACKING)

• GeolocationService.on(STOP_GEOLOCATION):

  • stopGPS(); this.on = false; emit('change')

• TrackStore.on(STOP_TRACKING):

  • saveTrack(); calcStatistics(); this.tracking = false; emit('change')
  • dispatch(START_UPLOAD)

所以，我有一个事件滚雪球。

据说在 Flux 中，一个 Action 不应该引发另一个 Action。但我不明白如何做到这一点。

我认为用户操作不能直接进入域商店，因为这些应该与 UI 无关。相反，AppState（或应用程序逻辑所在的任何地方）应该将用户操作转换为域操作。

1. 如何重新设计这种 Flux 方式？
2. 应用程序逻辑应该去哪里？
3. 尝试使域存储独立于应用程序逻辑是否正确？
4. “服务”的地方在哪里？

谢谢你。

我在前端的 Fluidpages 中遇到错误：

TYPO3 v6.2.11
Flux v7.2.0
Fluidpages v3.2.0
vhs v2.3.1

和以前一样，我已经使用 Flux 和 Fluidpages 设置了许多项目，但在最新版本中我陷入了困境。

我正在学习 React JS，它是 Facebook 创建的一个 javascript 库。对于更大规模的应用程序，强烈建议使用 Flux 模式/架构。

问题是 React + Flux 的所有教程都使用 Node ...

我发现在 .net 中使用 Flux 的教程很少……

ReactJS.net 是在 .net 中使用 React 的一个很好的起点，但在 .net 上没有实现 Flux 模式。

当前与 React 和 Node 一起使用的 Flux Pattern 可以与 React 和 .net 一起使用吗？

在我们的代码库中，我们最近将许多 React 组件迁移到了纯通量架构。因此，我们的数据流看起来几乎与 Facebook 团队提供的这张图片一模一样：（ _{来源：github.io）}

我们遇到的一个问题是调用服务器并获得结果需要大量样板代码。过程如下：

1. View 将一个叫做类似动作的动作传播GET_DATA_FROM_SERVER给动作创建者（比如说被称为ViewActionCreator）。
2. ViewActionCreator调度这个动作，它在大多数情况下没有负载，然后调用api.retrieveData
3. 从服务器接收到数据后，api.retrieveData调度一个动作，在这种情况下SERVER_DATA_RECEIVED，将检索到的数据作为有效负载调用。
4. 商店响应分派的两个动作。然而，在大多数情况下，商店只为第二个动作 ( SERVER_DATA_RECEIVED) 做一些事情，因为我们发现乐观视图更新除了登录等少数例外情况通常不需要或非常有用。

因此，我的问题是，我们有什么理由不应该直接让 view callapi的方法，而让那些 api 方法只在数据接收时调度动作？

我们遇到的另一个相关问题是使用 https://github.com/STRML/keyMirror 生成的常量。我们反复遇到一个错误，我们忘记添加动作创建者中使用的常量并将其存储到我们的常量文件中，但这直到运行时才会出现，因为我们的存储使用 switch 语句来测试他们从调度程序，当我们使用未定义的常量时，这只会渗透到 switch 语句的末尾。

我正在尝试编写一个简单的应用程序，它应该使用 Websockets 显示从 Firebase DB 接收到的项目列表。要接收数据，我应该监听 firebase 事件，如下所示：

我的问题是 - 注册此活动的正确位置在哪里？

我阅读了这篇关于 Flux 的精彩文章——在评论部分，Facebook 工程师给出了一个回答，称接收数据将通过 store 的 getData 方法。另一方面，在Facebook 的 Todolist教程中，有一个用于处理服务器操作的“handleServerAction”选项。我理解应该从视图和服务器分派动作的概念（作为视图动作和服务器动作）。

视图操作将从视图文件上的用户交互中分派。我不明白从哪里分派服务器操作（假设我想使用“handleServerAction”方法）