问题标签 [refluxjs]

我在测试我的应用程序中是否正确触发了 Reflux 操作时遇到了困难，实际上它们似乎根本不适用于 Jest。我有这个示例测试：

哪个输出：

即使使用 Jasmine 异步功能，它似乎也不起作用

给我...

有人做过这项工作吗？

我正在使用 Reflux 开发 React 应用程序，但在将商店连接到组件时遇到问题。

这是代码

问题是，当我在节点控制台中运行代码时，它可以工作：

但是当我运行测试时，该事件不会被记录。但是，我知道单击正在发生，因为handleClick()正在调用并且正在将PostActions对象打印到控制台。

PostStore 也正在初始化（我在那里有一个 console.log() 来验证它）。这让我相信问题出在 React 组件中，但据我所知，我的代码看起来与 Reflux 文档中的完全一样。

另外，顺便说一句，在 Jest 测试期间，有没有比在各处抛出一堆 console.log() 调用更好的方法来调试我的代码？像红宝石中的 binding.pry 之类的东西？

编辑：我包括测试：

当使用 React 和 Reflux 时，商店只有一个事件供组件监听。假如说：

• 我有一个包含产品列表的 ProductStore
• 我有两个组件可以监听这个商店的变化：一个对所有变化感兴趣的产品列表和一个只关心特定产品更新的详细信息页面

我如何区分“list_refreshed”或“item_updated”事件，其中第一个事件表示产品列表的完全刷新，而后者仅表示单个项目的更新？

我正在使用带有 react-router 和 Reflux 的 React 作为我的数据存储，但我不确定如何最好地处理持久性以允许页面刷新。

我的组件使用 Reflux.connect 连接到存储，但由于存储从后端获取数据，因此在组件首次初始化和渲染时它还不可用。

当用户从一开始就进入我的应用程序时，所有这些数据都会按顺序加载并在需要时可用，但如果进一步向下触发页面刷新，react 会尝试渲染依赖于非数据的组件还在那里。

我通过不断地在 LocalStorage 中保存数据副本并从 Reflux 存储 getInitialState() 提供数据来解决这个问题，以便所有组件在渲染之前获取数据。

我想知道这是否是正确的方法。当由于某种原因本地存储数据被清除或损坏时，界面变为空白，因为组件无法访问正确的数据。子结构和属性不存在并触发 javascript 错误。这似乎是一个混乱且不可靠的解决方案。

我很想知道用什么模式来解决这个问题。

------ 编辑 ----- 回答 WiredPrairie 的评论：

1) 为什么要用 getInitialState 中的数据初始化组件？

当我的组件使用 Reflux.connect 时，它们在第一次渲染时还没有处于其状态的数据，因为存储仍然需要获取其数据。我的观点目前不能很好地处理未定义的数据。通过在 getInitialState() 中从 Reflux 存储返回本地存储的缓存，所有连接的组件都将在第一次渲染调用之前获取该数据。

2) 导致页面刷新的原因是什么，为什么不能以与第一次相同的方式加载数据？

这主要是我必须围绕 livereload 构建的一种解决方法，当我进行编辑时刷新页面（稍后会考虑使用 react-hotloader 但还不是一个选项），但用户也可以在我的嵌套视图中的某个地方点击刷新那将具有相同的效果。当他们手动刷新时，他们并没有在开始时进入应用程序。

3）当组件连接到商店的更改事件时，为什么它们不更新呢？

他们确实更新了，但就像我说的那样，他们现在不处理空数据，在第一次渲染时他们会错过它，等待商店获取东西。我可以使用空数据使我的所有视图优雅地工作，但这会增加很多样板代码。

从到目前为止的回复中，我感觉我正在使用 localStorage 做的是常用的方法。在 localStorage 或 sessionStorage 或类似的东西中本地缓存内容，并在刷新后立即提供该数据。

我应该通过在 localStorage 无法正常工作的奇怪情况下优雅地处理空数据来使我的观点更加稳健。

运行 Jest 测试时出现以下错误：

如果 Jest 自动模拟出依赖项，那么任何需要的文件都不应该superagent得到模拟superagent吗？我拥有的所有甚至使用它发出 http 请求的功能都已被模拟为只返回测试数据而不发出请求。我不明白为什么我会收到错误。

更新

我尝试了此处找到的手动模拟。它仍然给我同样的错误。

我正在使用 Jest 测试一个 React/Reflux 应用程序。我在商店中有以下功能：

我试图模拟它，以便它只做它需要做的事情而不做实际的网络工作：

但是，似乎甚至从未创建过模拟函数。当我运行测试时，控制台仍然会记录ORIGINAL LOAD.

覆盖对象方法的正确方法是什么，而不是通过执行 ajax 调用来设置posts数组，而只是用测试数据设置它？PostStore

通过阅读文档，我不太了解 Reflux 异步操作是如何工作的。特别是当异步操作完成时，我需要触发一些东西。

在我的一个组件中，我想监听异步操作完成，然后转换到视图。

我已经创建了这样的操作：

在我的 projectStore 我有这样的东西：

但似乎 actions.loadProject.completed 不是一个函数，所以上面的代码不起作用。什么是正确的方法？

在过去的几天里，我有一些事情困扰着我，我似乎无法想出一个我喜欢的解决方案。我正在使用回流，但我认为它也适用于香草助焊剂。

所以，假设我有一个 React ComponentOne，它调用一个通量操作来将一些表单数据发布到 API 以创建一个事物。

我的商店触发了“好的，事物正在发布”事件，然后稍微触发了“好的，事物已创建”事件。

我的 ComponentOne 应该如何消除这些事件的歧义？ComponentTwo 可能调用了相同的操作，但我们不知道哪个 Thing-POSTed 事件对应于哪个组件。

也许 ComponentOne 的数据会导致失败事件，而 ComponentTwo 会导致完成事件……我们有两个事件，对于两个组件来说，这两个事件都是似是而非的事件，并且没有明显的方法来判断哪个是哪个。

我刚开始，所以我不知道这是理想的行为还是我错过了什么。我正在使用 Flux 架构（特别是 Reflux，但这不应该是相关的）。在我的超级简单的测试应用程序中：

处理程序是 React 组件，是最简单的设置。当应用程序启动时，我按预期登陆“公司”页面。然后，当我转换为“员工”时，一切都很好，但是当我转换回“公司”时，我观察到创建了一个全新的 {Company} 组件，从而使我的状态消失了。这将导致许多不必要的 API 调用，除非我做错了什么或不理解。

有没有办法告诉 Route 使用现有的处理程序（如果存在）并重新渲染它？而不是创建一个新类？

我试图弄清楚如何将 ajax 调用融入到通量/回流的做事方式中。从我在网上找到的一些信息来看，将 API 逻辑与商店分开似乎是正确的。

从那里开始，我创建了一个向服务器发出请求的客户端 API。现在，我希望这些函数能够监听我的操作，然后发出请求，并在成功触发其他操作后使用来自服务器的新数据更新商店。

如何为我的 API 提供类似于回流 createStore 方法的东西？或者，我的服务器调用是否有其他干净的方式来监听操作？