问题标签 [reactjs-flux]

我正在阅读有关Flux的信息，但Todo 应用程序示例过于简单，我无法理解一些关键点。

想象一个像 Facebook 这样的单页应用程序，它有用户个人资料页面。在每个用户个人资料页面上，我们希望无限滚动显示一些用户信息和他们最近的帖子。我们可以从一个用户配置文件导航到另一个用户配置文件。

在 Flux 架构中，这将如何对应于 Stores 和 Dispatchers？

我们会为每个用户使用一个PostStore，还是我们会拥有某种全球商店？那么调度程序呢，我们会为每个“用户页面”创建一个新的调度程序，还是使用单例？最后，架构的哪一部分负责管理“特定于页面”的 Store 的生命周期以响应路由更改？

此外，一个伪页面可能有多个相同类型的数据列表。例如，在个人资料页面上，我想同时显示Followers和Follows。在这种情况下，单例如何UserStore工作？会UserPageStore管理followedBy: UserStore和follows: UserStore？

As a follow up to the Store lifecycle question,

In a typical web app its nice to have a shortcut to the current application state via the URL so you can re-visit that state and use the forward and back buttons to move between states.

With Flux we want all actions to go through the dispatcher, which i guess also include an URL change. how would you manage URL changes within a flux application?

在关于 Flux 架构的 Facebook 演讲中，Jing在 12:17提到调度程序强制在当前动作被商店完全处理之前不能调度任何动作。

这里的调度程序是强制执行没有级联效果的主要部分；一旦一个动作进入商店，在商店完全处理完它之前，你不能再放入另一个动作。

那么，我的问题是，您如何正确处理可能从存储中启动的长时间运行的异步操作（例如 Ajax 请求，或处理一些其他外部异步 API）——任何阻止操作分派完成的事情（例如，等待通过 Ajax 请求的结果来解决一个 Promise）可能会阻止来自用户的 UI 生成的操作被分派。

I was reading through the source of todoapp-flux example, and in TodoStore.js I saw this:

I was wondering why facebook choose to merge two object, instead of just change the value of one property? Is there any benefit doing so?

我发现示例 todo Flux 应用程序有点缺乏，所以我试图通过开发一个应用程序来学习和实验来了解情况。

该应用程序是一个拖放式水果篮组织器。我有几个篮子，可以在它们之间拖着各种水果。您可以通过单击突出显示一个水果，最后拖动的项目将保持突出显示。

基于此，我有 3 家商店：

• 水果店
• 篮子商店
• AppStateStore - 跟踪最后点击和最后拖动的水果

当用户操作发生时，如果水果已被单击，则由 AppStateStore 调度和处理 FruitAction，如果已将水果移动到另一个篮子，则由所有商店处理。

主 AppView 组件侦听来自 FruitStore 和 AppStateStore 的更改事件并重新渲染。

我的问题是：

• 这是这种情况的好方法吗？
• AppView 是否应该监听多个商店？我应该如何防止 AppView 连续渲染多次？现在，当水果被移动时，FruitStore 和 AppStateStore 都会触发更改事件，导致连续两次渲染。
• React 网站上的 Flux 文章显示了调度动作对象的视图（例如 AppDispatcher.dispatch(TodoActions.updateText()) ），但如果动作自己调度（例如 FruitActions.moveBasket() ）并且 AppView 是不知道 AppDispatcher？
• 目前只有 AppView 监听商店，但如果要突出显示，单个 Fruit 组件是否应该监听 AppStateStore 以仅重新渲染它们自己？
• 是否有更完整的 Flux 架构或类似的示例？

假设我有一个 TodoStore。TodoStore 负责保存我的 TODO 项目。Todo 项目存储在数据库中。

我想知道将所有待办事项加载到商店的推荐方法是什么，以及视图应如何与商店交互以在启动时加载待办事项。

第一个替代方法是创建一个loadTodos操作，该操作将从数据库中检索 Todos 并发出一个TODOS_LOADED事件。然后视图将调用该loadTodos操作，然后侦听该TODOS_LOADED事件，然后通过调用来更新自己TodoStore.getTodos()。

另一种选择是没有一个loadTodos动作，并且有一个TodoStore.getTodos()将返回一个带有现有 TODO 项目的承诺。如果 TodoStore 已经加载了 TODO 项，它只是返回它们；如果没有，那么它将从数据库中查询并返回检索到的项目。在这种情况下，即使商店现在已经加载了 TODO 项，它也不会发出 TODOS_LOADED 事件，因为getTodos它不是一个动作。

我相信很多人会说这破坏了 Flux 架构，因为该getTodos函数正在更改存储状态，而存储状态只能通过调度程序发送的操作来更改。

但是，如果您认为 TodoStore 的状态是数据库中现有的 TODO 项，那么getTodos并没有真正改变任何状态。TODO 项完全相同，因此不需要更新或通知视图。唯一的问题是，现在 store 已经取回了数据，所以现在缓存在 store 中。从 View 的角度来看，它不应该真正关心 Store 是如何实现的。它不应该真正关心商店是否仍然需要从数据库中检索数据。所有视图关心的是他们可以使用 Store 来获取 TODO 项，并且当创建、删除或更改新的 TODO 项时，Store 会通知他们。

因此，在这种情况下，视图应该只调用 TodoStore.getTodos() 以在加载时呈现自己，并在 TODO_CHANGE 上注册一个事件处理程序，以便在由于添加、删除或更改而需要更新自己时得到通知。

您如何看待这两种解决方案。他们还有其他解决方案吗？

我有一个使用 Facebook 的 Flux Architecture 开发的网络应用程序。该页面有两个视图：一个显示 TODO 项目列表。第二个视图显示一组随机的 TODO 项。

显然有两个问题需要由商店管理。第一个是可用 TODO 的列表。第二个是随机选择的 TODO 项列表。

因此，我有一个TODOStore，他只关心管理可用的 TODO 项目。它对loadTODOs, addTODO, deleteTODO,有动作editTODO。启动时，此存储不会加载所有 TODO 项。我希望它仅在必要时从数据库中检索 TODO 项目列表。

第二家店是RandomTODOListStore。它的职责是管理随机选择的 TODO 项。在我看来，应该通过, 使用来RandomTODOListStore访问 TODO 项。TODOStoreTODOStore.getTODOItems()

问题在于，如前所述，TODOStore启动时不会加载 TODO 项。

问题是：“如何RandomTODOListStore保证TODOStore已经检索到 TODO 项？” .

我正在使用 Javascript (React JS) 构建一个需要监听左右箭头键的组件。我的组件是一张包含图像列表的卡片。单击图像时，会显示它，但我希望能够按左右箭头键并导航图像。

我有一堆嵌套的 div，我试图找出应该分配 onKeyPress 侦听器的那个。现在我将它分配给了许多 div，但我没有看到任何事件被触发。

在通量教程中它说，“应用程序状态仅在商店中维护。” 因此，对我来说，react 的控制器视图也具有this.state通过调用setState().

将有状态的控制器视图本身用作存储不是更有意义吗？这样，“状态”一词在应用程序中出现的唯一时间是在商店中。然后每个非状态（或非存储）视图将只使用this.props.

基本上，为什么我们有使用this.state该状态的视图和管理该状态的存储 - 视图不能自己管理它？我认为这就是this.state变量的意义所在。

我正在为使用 Fluxxor 提供事件调度程序的 React 应用程序编写测试。要做到这一点，需要告诉 Jest 不要模拟一些内部使用的模块，这些模块是由 Node 本身提供的。

这意味着我不能只将它们添加到unmockedModulePathPatterns配置键中，而是必须使用如下代码：

但是，我找不到任何有用的地方。我有一个setupEnvScriptFile设置了一些全局变量，我几乎在所有测试中都使用了这些全局变量，但是该jest对象似乎在该上下文中不可用，所以我不能只在那里设置模拟。

作为一种临时的权宜之计，我将上面的代码包装在一个函数中，我在describe测试 Fluxxor 存储的任何块的开头调用该函数，但它远非理想。