如何使用 reactjs.net 在 asp.net 中创建通量架构？

我会有几个文件。Jsx，我将如何设法成为服务器的所有成员？

在此示例 => Link中，它使用 asp.net 创建但不使用服务器呈现

我对如何使用 React 有自己的看法，并且正在构建自己的框架，受 Om 的启发。我正在实现一些类似于 Flux 架构的东西，商店可以在某些事件上更新自己。

我不确定的是为什么在 Flux 架构中我们需要存储依赖项？

商店不应该是给定有界上下文的自包含数据持有者，就像我们对 CQRS 架构所做的那样？

在事件系统中，2 个 CQRS 组件最终可能持有相同的数据。我们是否表达了存储依赖关系以避免在存储中保存重复数据？

有人能想出一些非常具体的用例，其中需要存储依赖项并且问题很难以任何其他方式解决吗？我自己一个都找不到。

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

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

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

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

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

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

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

我试图将 SetIntervalMixin 分离到与组件类文件不同的文件中。也许我不完全理解 module.export 是如何工作的，但是......如果我这样做：

在 SetIntervalMixin.js 中，然后使用组件可以正常工作：

但如果我这样写：

它不起作用（尝试调用 setInterval() 时未定义）。我认为之后缺少一些东西：

就像定义组件时一样，您使用：

有没有类似 React.createMixin(.. 的东西？或者最好的方法是如何做到这一点。

谢谢。

原来的

首先，我遵循Flux架构。

我有一个显示秒数的指示器，例如：30 秒。每隔一秒，它显示的时间会减少 1 秒，所以从 29、28、27 到 0。当到达 0 时，我清除间隔，使其停止重复。此外，我触发了一个动作。当此操作被发送时，我的商店会通知我。所以当这种情况发生时，我将间隔重置为 30 秒，依此类推。组件看起来像：

组件按预期工作。现在，我想用 Jest 测试它。我知道我可以使用 renderIntoDocument，然后我可以 setTimeout of 30s 并检查我的 component.state.elapsed 是否等于 0（例如）。

但是，我想在这里测试的是不同的东西。我想测试是否调用了刷新功能。此外，我想测试当我的经过状态为 0 时，它会触发我的 TriggerAnAction()。好的，对于我尝试做的第一件事：

但是我在编写 npm test 时收到以下错误：

我从 ReactTestUtils 看到了一个mockComponent函数，但给出了它的解释，我不确定它是否是我需要的。

好的，在这一点上，我被卡住了。谁能告诉我如何测试我上面提到的两件事？

更新 1，基于伊恩的回答

这就是我要运行的测试（请参阅某些行中的注释）：

我还是误会了什么……

商店是否应该保持自己的状态并有能力在这样做时调用网络和数据存储服务......在这种情况下，这些动作只是愚蠢的消息传递者，

-或者-

...商店是否应该是来自操作的不可变数据的愚蠢接收者（并且操作是在外部源之间获取/发送数据的操作？在这种情况下，商店将充当视图模型，并且能够聚合/过滤它们的在根据动作提供的不可变数据设置自己的状态之前的数据。

在我看来，它应该是一个或另一个（而不是两者的混合）。如果是这样，为什么首选/推荐一个而不是另一个？

我正在重写我的应用程序以使用 Flux，但从商店检索数据时遇到问题。我有很多组件，它们嵌套很多。其中一些很大 ( Article)，一些小而简单 ( UserAvatar, UserLink)。

我一直在努力解决组件层次结构中应该从 Stores 读取数据的位置。
我尝试了两种极端的方法，但我都不太喜欢：

所有实体组件都读取自己的数据

每个需要来自 Store 的数据的组件只接收实体 ID 并自行检索实体。
例如，被Article通过articleId，被通过。UserAvatarUserLinkuserId

这种方法有几个明显的缺点（在代码示例下讨论）。

这种方法的缺点：

• 有 100 多个可能订阅 Store 的组件令人沮丧；
• 很难跟踪数据的更新方式和顺序，因为每个组件都独立检索其数据；
• 即使您可能已经有一个实体处于状态，您也必须将其 ID 传递给孩子，孩子们将再次检索它（否则会破坏一致性）。

所有数据在顶层读取一次并传递给组件

当我厌倦了跟踪错误时，我尝试将所有数据检索放在顶层。然而，这被证明是不可能的，因为对于某些实体，我有多个嵌套级别。

例如：

• ACategory包含UserAvatar为该类别做出贡献的人；
• 一个Article可能有几个Categorys。

因此，如果我想在 an 级别从 Stores 检索所有数据Article，我需要：

• 从 中检索文章ArticleStore；
• 从 中检索所有文章的类别CategoryStore；
• 从 中分别检索每个类别的贡献者UserStore；
• 以某种方式将所有这些数据传递给组件。

更令人沮丧的是，每当我需要一个深度嵌套的实体时，我都需要在每一层嵌套中添加代码以另外传递它。

加起来

这两种方法似乎都有缺陷。我如何最优雅地解决这个问题？

我的目标：

• 商店不应该有疯狂的订阅者数量。如果父组件已经这样做了，每个UserLink人都听是愚蠢的。UserStore

• 如果父组件已从存储中检索到某些对象（例如user），我不希望任何嵌套组件必须再次获取它。我应该能够通过道具传递它。

• 我不应该在顶层获取所有实体（包括关系），因为这会使添加或删除关系变得复杂。curator每次嵌套实体获得新关系（例如，类别获得 a ）时，我不想在所有嵌套级别引入新道具。

我正在开发一个包含许多嵌套状态和组件的大型 ReactJS 应用程序。我希望大部分组件都独立开发。考虑有两个组件：

1. 一个通用的自动建议文本框（比如说，它建议用户）
2. 我使用自动建议组件的表单组件

在应用程序级别，我有 UserStore、Dispatcher 和 UserActions。所以我的问题是

1. 如果 Auto-suggest 是孤立开发的，那它如何使用 app 级别的 Dispatcher？或者组件应该有另一组 UserStore、Dispatcher 和 UserActions？
2. 如果表单组件是独立开发的，它们将如何从自动建议组件接收数据？

Facebook Flux 调度程序明确禁止 ActionCreators 调度其他 ActionCreators。这种限制可能是一个好主意，因为它会阻止您的应用程序创建事件链。

但是，一旦您的 Store 包含来自相互依赖的异步 ActionCreators 的数据，这就会成为一个问题。如果CategoryProductsStore依赖于CategoryStore，似乎没有办法在不采取推迟后续行动的情况下避免事件链。

场景 1： 包含某个类别中产品列表的商店需要知道它应该从哪个类别 ID 获取产品。

场景 2： 另一种场景是当一个子组件作为 Store 更改的结果被挂载并且它 componentWillMount/componentWillReceiveProps 尝试通过异步 ActionCreator 获取数据时：

有没有办法避免这种情况而不诉诸延迟？

Flux 文档指出状态应该存储在 Stores 中。然后应该将与实体相关的加载、保存、错误消息存储在 Stores 中。由于 View 将从 Store 获取其初始状态，因此只有知道其加载/保存是否来自 Store 的方法。

此外，当编辑表单时，用户决定取消编辑，因此这些中间表单值应该存储在 Views 状态中，而不是发送到 Store？