在Flux / React中设置页面标题的工作是什么？

Question

假设我从Facebook的漏洞聊天示例开始。有多个线程，每个线程都有消息。我想编写代码，以便当我单击导航到另一个线程时，我会相应地更改页面标题。

谁设置了网页标题？

• 线程列表组件中的单击处理程序（不太可能）
• 由组件调用的动作创建者
• 我创建的新商店，用于收听与导航相关的操作
• 一个实际上没有DOM存在的新反应组件（页面标题有点像自定义视图组件，对吗？）

现在让我们说我想更进一步，当用户收到新消息时，实现像Facebook一样闪烁的页面标题。当有新消息出现时，它会通过一些Web套接字或AJAX响应处理程序。

现在谁设置了页面标题？

• 这个新的邮件处理程序
• 由处理程序调用的动作创建者
• 一些新店（见上文）
• 一些反应成分（见上文）

但是当我这次设置标题时，我需要知道有多少未读消息。我不知道这一点，直到行动被解雇并且所有商店都有更新的数据，所以看起来前两个选项都出来了。

修改

发布后，我发现this gist似乎注册了调度员的回调，但不是商店。这是正确的方法吗？如果不是商店，你会称这件事为什么？

Answer 1

标题是您的应用程序状态的一部分，因此您需要一个商店来保留它，比如TitleStore。当它发生变化时，您需要对窗口应用更改：

 TitleStore.on('change', function() {
   document.title = TitleStore.getTitle();
 });

或者您可以将其实现为React组件。它将在mount上应用更改（或使用此模块：https://github.com/gaearon/react-document-title）。

还有一件事：改变商店的行动。您可能想要创建一个特殊操作，例如SET_TITLE，但它绝对是错误的。操作应该是用户所做的事情，而不是您想要发生的事情。相反，您应该使用现有的操作，例如LINK_CLICKED或THREAD_SELECTED等。其他商店会相应地对此操作做出反应，您可以使用它们在waitFor的帮助下更新标题。