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

Posted 2023-02-22

【中文标题】在 Flux/React 中设置页面标题是谁的工作？

【英文标题】：Whose job is it in Flux/React to set the page title?

【发布时间】：2015-07-28 15:16:09

【问题描述】：

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

谁设置页面标题？

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

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

现在谁来设置页面标题？

这个新的消息处理程序 被处理程序调用的动作创建者 一些新店（见上文） 一些反应组件（见上文）

但是我这次设置标题的时候，我需要知道有多少条未读消息。在动作触发并且所有商店都更新了数据之前，我不知道这一点，所以前两个选项似乎已经失效。

编辑：

发布后，我发现this gist 似乎注册了调度程序的回调，但不是商店。这是正确的方法吗？如果不是商店，你会怎么称呼它？

【参考方案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 的帮助下使用它们来更新标题。

【讨论】：

我猜你是在提倡我原来的问题中的选项 3 或 4。无论哪种方式，听起来我都应该在构成应用程序状态的其他商店上构建一个使用 waitFor 的 TitleStore。