问题标签 [refluxjs]

我们最近从 Angular 切换到 React + Flux 来构建一个相当复杂的业务应用程序。

采用一个容器组件将所有状态作为属性向下传递组件树的方法并不是为我们开发应用程序的实用方法，因为该应用程序使用了类似页面的大型模式。确实有足够的状态传递给模态，以便他们将数据加载到他们的存储中。

我遇到的问题是我需要将一些初始状态（作为道具传递）到模态组件的存储中。在这篇文章中，Facebook 的好人说，当同步不是目标时，可以使用道具作为初始状态。

这就是我目前将初始状态放入我的商店的方式：

我不确定这样做的最佳做法是什么，或者这是否是 Flux 反模式？

我正在使用对通量架构做出反应，但我遇到了一个问题。
我需要创建一个获取用户 ID 并获取用户的操作。这是代码：

我想使用一个将缓存所有用户的存储，因此如果用户之前获取，该操作将不会执行后端调用。新操作应如下所示：

问题是我不想在操作中管理用户数据，所以我想到实现 getFetchedUser() 的唯一方法是检查用户存储。
这是一个好方法吗？
可以操作访问存储吗？

I'm trying to cache the rendered markup of the App component. I know that this is somehow "against the rules" but I'm in a server-less environment (chrome-extension). Upon page load i want to inject the cached App markup into the DOM. The expected result is similar to the experience of having the react-component rendererd on a server. Very much as described here: http://www.tabforacause.org/blog/2015/01/29/using-reactjs-and-application-cache-fast-synced-app/.

To illustrate my usecase, I have updated the Thinking in react example:

• App
  • FilterableProductTable
    • SearchBar
    • ProductTable (containing from reflux store in state)
      • ProductCategoryRow
      • ProductRow

As is expected, neither componentDidUpdate nor componentWillUpdate are called in App.

Is it possible to detect updated child components in the App component in a sane way? Preferably without modifying the child component classes?

I would like to avoid moving props/state to App.

作为一个整体，我是 Flux 的新手，但我试图从 Reflux 开始掌握它，这似乎更固执己见，更容易学习。

据我了解，Reflux 商店有一种trigger方法可以指示商店的数据已更改，并将更新的数据传递给它。然后可以使用Reflux.connect mixin 或类似方法将此数据设置为 React 组件的状态（或状态的属性之一）。

但是，如果一个商店有多组数据需要分别收听呢？假设我正在修改 TodoMVC RefluxJS 示例，并且我希望 TodoStore 还包含一个title属性，该属性指示待办事项列表（以及待办事项列表list）的名称。假设还有一个<Title>组件正在侦听属性的更改，并在它发生时将其title设置为状态。title

调用this.trigger(title)将更新标题组件，但也会导致待办事项组件尝试使用标题字符串作为其状态，因此我们需要一种方法来指示哪些数据已更改。是否应该将这两个属性 (title和list) 分开到不同的商店中？或者所有调用都应该trigger包含一个指示属性的字符串：this.trigger("title", this.title)或this.trigger("todos", this.list). 还是应该将所有数据组合成一个对象，然后由听众选择（例如使用Reflux.connectFilter）？

最后两个示例将新数据引入this.trigger()调用，这意味着Reflux.connect不能再使用，因为connect获取从存储返回的数据并直接将组件状态设置为它。这是否意味着我们必须使用Reflux.listenTo(TodoStore,"onTodoChange")，然后过滤掉与trigger该组件无关的调用？

鉴于我有一个基于 AJAX 的搜索字段，它对用户输入做出反应，通过 AJAX 从后端请求搜索结果，在搜索字段下方的下拉列表中显示结果，允许通过光标键导航搜索结果并对按键做出esc反应智能方式。

由于当前基于 Backbone 的组件在很多方面都被破坏了，所以我想重新实现该搜索组件，使用React可能还有Flux架构。

在规划过程中，我的组件至少有 10 种不同的状态（甚至更多），它必须对actions用户输入actions触发以及异步服务器响应触发做出反应。

问题store1：我应该在 a而不是父组件中建模所有状态吗？这意味着，每个用户输入都会更改存储状态，例如:searchQuery，:searchResults而我的父视图组件会对该状态更改做出反应？

问题2 ：或者我应该对父组件本身的所有状态进行建模并完全省略 astore和？dispatcheractions

问题3 ：独立于处理状态store或父组件本身，事实证明，组件本身至少可以有10种不同的状态，并且应该只允许一定数量的转换。通常，我会在这里引入一个状态机实现，对所有模型:states进行建模，:transitions并在每次接收到一个动作store或在父组件中调用回调方法时执行转换。在组件中处理这些以及在这些之间的正确React way处理是什么？statestransitionsstates

问题4：哪个是最先进Flux的 Javascript 实现？到目前为止我已经看到了反流，但我不确定，那是我的毒药。

我对这里的各种建议持开放态度。

出于某种原因，每次我在我的 react 组件中触发一个动作时，与该动作关联的 store 方法都会触发两次。使用 Firefox 调试器，我注意到事件发射器似乎“发射”了两次动作，尽管事实上我只调用了一次动作（onClick）。

零件

回流商店

反流动作

正如你可以想象的那样，这一直是我的眼中钉。我究竟做错了什么？

任何答案将不胜感激！

现在我将 store 的概念理解为 React 应用程序的真实来源，但似乎有时使用 store 是多余的，尤其是在仅 UI 的情况下。

例如，假设我正在制作一个包含电影列表的应用程序。该应用程序包含一个搜索栏，可让您根据标题过滤这些电影。这个搜索栏的值（我们称之为searchTerm）是否应该包含在商店中？它唯一的影响是显示的电影列表，这纯粹是一个 UI 功能。它不会被发送到服务器或保存到本地存储。所以在我的handleTextChange功能中，我应该提醒商店，还是简单地设置组件的状态：

应该是这样（使用商店）：

或者这个（不使用商店）：

后一个例子显然更简单。是否有充分的理由使用商店来过滤数据？或者视图应该有一个searchTerm变量并在函数中执行过滤render()？

我只是从 Reflux 和 React 开始。我看过几个 React/flux 教程/视频，但我还没有找到正确的方法来使用 Reflux/React 和 React Router 设置我的应用程序：

想象一下，我有以下网址：localhost:9000/projects/1/roles/2/action/3。根据 url，我应该能够追溯应用程序的状态。所以在我的 Route 处理程序中，我有以下设置：

应用程序.cjsx

在这种情况下，{Action} 是应该从商店接收数据的组件。这个 Action-component 监听 ActionStore 来接收数据：

根据几个教程，我应该在引导程序中启动我的商店，所以我在我的 App.cjsx 中添加了以下行：

actionstore 具有以下启动方法：

我的问题是应用程序中的流程不正确。现在的流程是：

1. 创建并启动 ActionStore
2. 存储从服务器启动和加载操作
3. 启动 Action 组件（添加监听器到 store）

所以actionstore已经接收到数据，之后组件被初始化，所以它永远不会从actionstore获得触发器。如何以正确的方式使用 React Router 和 Reflux 进行设置？

我有一个简单的导航栏用例

成分

• 导航栏.jsx
• 导航栏项目.jsx

专卖店

• 导航商店.js

使用依赖项

• 反应
• 回流

我会像这样渲染导航栏

问题是我的初始状态是 {}，我的 NavStore 也是，因为不涉及外部数据，我应该如何使用 itemList 信息初始化 NavStore.js？

我尝试在 Store 上添加一个辅助方法，如 initializeData(data)，并在 NavBar 组件的渲染或 getInitialState() 中调用它，它总是在组件上的 this.setState() 之后被调用，并使用初始值重新初始化存储。不知道为什么 getInitialState() 总是在 this.setState() 上被调用。

我也使用 Reflux 作为动作调度程序，但我看到每个动作都调用了 getInitialState()。似乎有点奇怪。Reflux 默认会触发组件的重新创建吗？

我们正在启动一个全新的 React.js 项目，并且被所有用于“将它们组合在一起”的选项所淹没。有 Fluxxor、Fluxible、react-router、Baobab、Delorean、Marty、Reflux 等等。我们想利用单向数据流的概念，因此不热衷于将 ember 或 Angular 之类的东西与 React 结合使用。

我们的数据将来自我们使用 Hapi.js 构建的 Restful API，因此这只是一个将从 API 中提取的客户端应用程序。

以下是我们正在考虑的其他一些标准：

• 相对简约——这个领域的事情变化如此之快，以至于如果 React 发生重大变化，或者如果 Relay 下周突然下降，我们应该能够采用新的做事方式，或者提出我们自己的解决方案它。

• 有据可查 - 不言自明

• 技术上合理 - 不易出现竞争条件，保持单向流，无明显错误，可靠的代码库

• 活跃的社区——频繁的签到、对人们在 git 中发布的错误问题的响应等

任何想法都会受到欢迎！