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

标签 javascript reactjs reactjs-flux flux

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

谁来设置页面标题?

  • 线程列表组件中的点击处理程序(不太可能)
  • 被组件调用的 Action 创建者
  • 我创建的一个新商店,用于监听与导航相关的操作
  • 一个实际上没有 DOM 存在的新 React 组件(页面标题有点像自定义 View 组件,对吧?)

现在假设我想更进一步,在用户收到新消息时实现一个闪烁的页面标题,如 Facebook。当收到新消息时,它会通过一些网络套接字或 AJAX 响应处理程序。

现在谁来设置页面标题?

  • 这个新的消息处理程序
  • 被处理程序调用的 Action 创建者
  • 一些新店(见上文)
  • 一些 react 组件(见上文)

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

编辑:

发帖后发现this gist似乎在调度程序上注册回调,但不是商店。这是正确的方法吗?如果不是商店,你会怎么调用它?

最佳答案

标题是您应用程序状态的一部分,因此您需要一个商店来保存它,比如说 TitleStore .当它发生变化时,您需要将更改应用于窗口:

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

或者您可以将其实现为 React 组件。它会在挂载时应用更改(或使用此模块:https://github.com/gaearon/react-document-title)。

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

关于javascript - 在 Flux/React 中设置页面标题是谁的工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30280816/

相关文章:

laravel - 设置 Laravel 5.4 以使用 React

javascript - React setState 和 Flux Action 更新

php - 用smarty函数的返回值做事?

javascript - promise 的返回值不是预期的

PHP echo 覆盖之前的 echo

javascript - bind() : You are binding a component method to the component. React 会自动为你做这个吗?

javascript - 如何从 gatsby-config.js 中获取动态数据?

javascript - 如何在 "flux"应用程序中管理昂贵的派生计算

reactjs - 如何为 RelayMutations 触发 Flux 操作

javascript - 如何将多维数组转换为单个数组? JavaScript