问题标签 [fluxible]

考虑一个基于 Flux 的同构应用程序，并使用 Fluxible 库来实现。您有一个 React 电子邮件应用程序，左侧是消息列表，右侧是当前打开的消息。

您的路由器在使用 URL '/message/123' 调用它时会触发 'SHOW_POST' 操作，并且该操作会加载数据、更新存储，因此消息会显示在右侧。这一切都有效，导航承诺得到解决并呈现页面。

但是，页面呈现时没有左侧的消息列表。如果在 SHOW_POST 期间调用 'LOAD_ALL_MESSAGES' 的操作，它们实际上并没有在服务器上呈现，服务器返回一个空列表并通过客户端上的 AJAX 加载它们。

如何在页面上填充其他组件需要的其他商店。我尝试在渲染需要它们的组件时调用操作来填充它们，这似乎不干净，并且不能解决组件未在服务器端渲染的问题。

在所有导航操作中必须触发其他操作来填充存储似乎同样不干净，因为可能不需要存储，代码将是重复的，因为我需要从几乎所有各种导航操作中调用这些填充操作。

在服务器端渲染期间填充后台存储的首选架构是什么。从每个导航中触发多个操作并等待它们全部解决？

基本上，在加载主页时，会触发一个以 JSON 形式从数据库中获取数据的操作。它分派我的商店接收到的 SUCCESS 并更新对象的状态posts。当我console.log()从商店出来时，我看到数据确实已经收到。但是，我的组件没有获取该数据。

这是我的组件代码：

我在 React Developer Tools 的 props 中看不到帖子数据。

这里是商店：

有人可以帮我吗？

谢谢

I have a classic Flux pattern in my application, using fluxible. An input's value is tied to my component's prop, and its onChange invokes an action, which in turn updates a store, which in turn passes a prop into my component:

The problem I'm having is that when the store emits a change and the new value gets passed into my component, that causes it to re-render, and the input cursor position is lost (is moved to the end).

I know I can create a custom shouldComponentUpdate method for my component, but doing so is somewhat tricky and definitely tedious for what I assume is a very frequently-occuring pattern.

Is there a well-established pattern for avoiding re-renders for controlled inputs?

我有：

问题是，在动作触发后似乎 setState 立即触发，因此没有给我另一个组件的效果。

如何仅在操作完成后设置状态（无论成功或失败）？

这是我的行动：

更新：

我有：

工作屏幕

右面板

工作清单

问题是，视图状态的改变不会重新渲染任何子元素。

我怎样才能让它工作？

尝试创建商店，特别是 UserStore 时，我在 Fluxible 中遇到错误：

错误：找不到模块“fluxible-app/utils/createStore”

我该如何解决这个问题？

我正在使用的项目/代码如下：

https://github.com/jaxoncreed/the-next-facebook/blob/76b2651f7d04c3df569dfcf5f1460ed82678b807/stores/UserStore.js

在我的 TaskController.php 中，我有：

我完全不知道如何将 $enquiry 模型传递到我的反应商店：

查询商店.js

我需要以某种方式将其回显到 JS 变量中吗？我怎样才能让它工作？关键是，当页面加载时，我已经拥有了所有数据，并且 React/Fluxible 不需要再次请求数据。

我有两个下拉菜单作为组件传递给组件。我可以用单独的状态来控制两者，但我认为这可以用一个状态来完成？

标题

HeaderDropdown

从“反应”导入反应；

我怎样才能使它一次只能打开一个并在单击另一个时关闭所有其他？当我将点击事件绑定到 HeaderDropdown 时，是否需要存储“this”中的某些内容？

我错过了这个问题的一些东西。这需要在用户单击 DarkLabel 中的 right_icon 时发生。

暗标

假设我有两个反应组件。

组件 A 是网站所有者可以添加到其网站的电子商务商店。它保存商店的产品，网站的访问者可以选择要添加到购物车的商品。

组件 B 是一个购物车组件，站点所有者可以选择将其添加到其站点的标题中。

我想解决的一个基本用例如下：

1. 用户访问该网站并将商品添加到他们的购物车
2. 组件 A 执行更新共享购物车商店的操作
3. 此购物车商店向组件 B 发出更改警报
4. 组件 B 通过从购物车商店获取新的购物车信息来更新其状态
5. 新计数反映在标题中

在网站上，像 A 和 B 这样的组件被称为“插件”。当主站点呈现其页面时，它会遍历要在页面上呈现的插件列表。这些插件中的每一个都是相互独立的。

我的问题是，有没有办法让这两个插件中的两个被传递到同一个商店，或者订阅同一个商店，而无需与主父组件交互？

如果这不可行，我的下一个解决方案是将组件 A 和 B 容纳在容器组件 X 中。X 将是一个持有状态和业务逻辑的提供者。A 和 B 将仅包含视图逻辑。X 将呈现为插件，但在页面上不可见，并管理 A 和 B 的状态。

如果我采用这种容器方法，有没有办法从容器中提取 A 和 B，以便在它们链接到同一个商店后独立渲染它们？

我回到了一个旧的fluxible项目，我开始了一段时间，当我使用它时npm run dev，它似乎启动了两次并且抛出了一个错误。它曾经可以工作 - 导致此错误的配置是什么？标准 Fluxible 配置是否应该运行两台 Web 服务器，一台在端口 3000 上，另一台在 3001 上？

我注意到在 webpack-dev-server.js 中它也调用了 start.js。

也许 shell.exec 对 start.js 的调用是多余的？