问题标签 [reactjs-flux]

我正在为几个 Flux 商店编写单元测试，但遇到了一点小麻烦。

我的商店一般是这样建造的：

如您所见，由于 setter 函数位于 store 对象之外 - 它不能直接访问。

这提出了一个问题，因为测试/操作商店数据的唯一方法是通过Action -> Dispatcher ->事件侦听器（从技术上讲，Action 可以被删除），这不是我想要通过的对商店进行单元测试。

另一种方法是将 setter 方法实际放在 store 对象上——但这不是我真正想做的事情。

有什么想法吗？

使用 Flux 实现时应如何显示模态窗口。我可以让组件更新其状态以显示模式并在完成后关闭它。模态中的保存将触发操作并更新商店。但是模态不会需要关闭。然后我需要发出不同的事件或让商店存储模态的状态。

React.js的最大优势之一应该是服务器端渲染。问题是关键功能React.renderComponentToString()是同步的，这使得在服务器上呈现组件层次结构时无法加载任何异步数据。

假设我有一个通用的评论组件，我可以将它放在页面上的几乎任何地方。它只有一个属性、某种标识符（例如，在其下方放置评论的文章的 id），其他一切都由组件本身处理（加载、添加、管理评论）。

我真的很喜欢Flux架构，因为它让很多事情变得更容易，而且它的存储非常适合在服务器和客户端之间共享状态。初始化包含评论的商店后，我可以将其序列化并将其从服务器发送到客户端，以便轻松恢复。

问题是填充我的商店的最佳方式是什么。在过去的几天里，我一直在谷歌上搜索，我遇到了一些策略，考虑到 React 的这个特性被“推广”了多少，这些策略似乎都不是很好。

1. 在我看来，最简单的方法是在实际渲染开始之前填充我的所有商店。这意味着组件层次结构之外的某个地方（例如连接到我的路由器）。这种方法的问题是我几乎必须定义两次页面结构。考虑一个更复杂的页面，例如具有许多不同组件（实际博客文章、评论、相关文章、最新文章、推特流......）的博客页面。我必须使用 React 组件设计页面结构，然后在其他地方我必须定义填充当前页面的每个所需存储的过程。这对我来说似乎不是一个好的解决方案。不幸的是，大多数同构教程都是这样设计的（例如这个很棒的flux-tutorial）。

2. 反应异步。这种方法是完美的。它让我可以在每个组件的一个特殊函数中简单地定义如何初始化状态（无论是同步还是异步），并且在将层次结构呈现为 HTML 时调用这些函数。它的工作方式是在状态完全初始化之前不会渲染组件。问题是它需要光纤据我所知，这是一个改变标准 JavaScript 行为的 Node.js 扩展。虽然我真的很喜欢这个结果，但在我看来，我们仍然没有找到解决方案，而是改变了游戏规则。我认为我们不应该被迫这样做来使用 React.js 的这个核心特性。我也不确定这个解决方案的普遍支持。是否可以在标准 Node.js 网络托管上使用 Fiber？

3. 我自己有点想。我还没有真正考虑过实现细节，但总体思路是我会以与 React-async 类似的方式扩展组件，然后我会在根组件上重复调用 React.renderComponentToString()。在每次传递期间，我都会收集扩展回调，然后在传递的 和 处调用它们以填充存储。我将重复此步骤，直到填充当前组件层次结构所需的所有商店。有很多事情要解决，我特别不确定性能。

我错过了什么？还有另一种方法/解决方案吗？现在我正在考虑采用 react-async/fibers 方式，但我并不完全确定，如第二点所述。

GitHub 上的相关讨论。显然，没有官方的方法甚至解决方案。也许真正的问题是打算如何使用 React 组件。像简单的视图层（几乎是我的第一个建议）还是像真正的独立和独立组件？

所以我最近在玩 React 和 Flux 架构。

假设有 2 个 Store A 和 B。A 依赖于 B，因为它需要 B 的一些值。所以每次调度程序调度一个动作时，首先执行 B.MethodOfB，然后执行 A.MethodOfA。

我想知道与将 A 注册为 B 的侦听器并在每次 B 发出更改事件时仅执行 A.MethodOfA 相比，这种架构有什么优势？

顺便说一句：考虑一下没有来自 facebook 的示例调度程序的“switch case”的 Flux 实现！

除了语义之外，是否有任何理由为视图和服务器操作创建不同的调度方法？我见过的所有教程和示例（最值得注意的是this）在侦听分派的有效负载时完全忽略了源常量，以支持打开有效负载的操作类型。

我想这种模式在通量示例中普遍存在是有原因的，但我还没有看到一个具体的例子来说明为什么这很有用。大概可以添加一个额外的 if 或打开有效负载源来确定是否在商店中采取行动，但我所见过的任何示例都没有考虑这个常量。对此的任何想法将不胜感激。

我正在尝试了解Flux 示例聊天应用程序。作者提到了这种单向数据流：

但是，在示例应用程序中，Action Creators( ChatMesssageActionCreator ) 和Stores( MessageStore ) 之间以及Stores( MessageStore、ThreadStore ) 和Web API Utils( ChatMessageUtils ) 之间存在依赖关系，这似乎违反了单向数据流规则：

是否建议遵循给定的示例，还是应该设计更好的模式？

更新

我发现 ChatMessageUtils 不属于 Web API Utils，所以商店的两个箭头不应该指向那里，因此也许它们没问题。然而，ActionCreators 和 Store 之间的联系似乎仍然很奇怪。

到目前为止，我已经完成了两个官方 Flux 架构示例（https://github.com/facebook/flux）。

但是，我真的不确定在呈现初始数据后如何完成数据更改。

例如，假设由于服务器响应而导致示例中的待办事项项目发生变化，如何在不使用项目组件中的 setProps() 的情况下正确更新相应的项目（据我所知，这是禁止的） ?

这可能是更多与 React 相关的误解 - 期待您的建议！

我一直在玩 React/Flux，但在处理对权限敏感的操作时遇到了麻烦。

首要问题：当未登录的访问者尝试要求他/她登录的操作时，Flux 的方式是什么（a）检查用户是否已登录，（b）启动登录流程，（c ) 完成动作就成功了？

以论坛应用程序为例，该应用程序需要用户登录才能发帖：

我们有一个评论表单组件（主要取自 FB 的 React tut），如下所示：

评论商店（缩写）

还有一个处理会话的商店（也缩写）：

我最初的想法是，这是 FluxwaitFor()方法的一个案例。但是，上面的实现失败了，waitFor因为一旦设置就关闭依赖循环SessionStore.dispatchToken（一旦ensureCurrentUser返回）。

在这种情况下，负载应该被传递到ensureCurrentUser，然后再传递到路由处理程序中/login吗？处理这些类型的流的 Flux 方式是什么？

提前致谢 ：）

我在搞乱 React 并且遇到了嵌套列表的问题。我有 2 个列表 - 项目和待办事项，每个待办事项都有一个project_id。我有 4 个与这些列表相关的组件：projects-component它呈现一个project-components 列表，每个都有自己todos-component的一个projectId属性设置为项目的 ID。使用传递依赖于todos-component的函数TodosWatchMixingetTodoscomponent.props.projectId获取待办事项列表的函数，然后呈现第四个组件的列表：todo-component（此处未显示。）在我将新项目添加到列表之前，这一切都非常有效。项目出现了，但待办事项发生了变化 - 新项目中包含另一个项目的待办事项，并且该项目的其他大部分待办事项似乎也发生了变化......交互（刷新或检查错误的项目）修复它 - 所以我猜想我的使用 React Chrome 开发工具我可以看到新项目上有它自己的 ID，但它也有一个项目列表......我错过了什么？

以下是一些代码片段：

项目-component.js

项目组件.js

todos-component.js

项目-store.js

您可以在此处查看正在进行的工作。点击ctrl+shift+L或command+shift+L加载测试数据，然后添加一个新项目，您可能会看到农场列表项目出现在您的新项目中。

假设我定义了一个<Tag>有两个 props 的组件：id和name. 我的应用程序在两个不同的地方呈现这个组件，所以我有一个<Tag>组件，它的 id1出现了两次，但它的所有者不同。一个标签归<Entries>组件所有，另一个标签归组件所有<Tags>。

单击a 时<Tag>，我想更改其状态，并且我希望所有其他<Tag>具有相同状态的组件id也更改其状态以使其匹配。最好的方法是什么？都应该<Tags>有相同的根组件吗？我不喜欢这个主意，因为我觉得这是一个脆弱的解决方案。