Flux/React 设置页面标题是谁的工作?
Whose job is it in Flux/React to set the page title?
假设我从 Facebook flux-chat 示例开始。有多个线程,每个线程都有消息。我想编写代码,以便当我单击导航到不同的线程时,相应地更改页面标题。
页面标题是谁设置的?
- 线程列表组件中的点击处理程序(不太可能)
- 被组件调用的动作创建者
- 我创建的一个监听 navigation-related 动作的新商店
- 实际上 DOM 不存在的新 React 组件(页面标题有点像自定义视图组件,对吧?)
现在假设我想更进一步,在用户收到新消息时实现一个闪烁的页面标题,如 Facebook。当收到新消息时,它会通过一些网络套接字或 AJAX 响应处理程序。
现在谁来设置页面标题?
- 这个新的消息处理程序
- 处理程序调用的动作创建者
- 一些新店(见上文)
- 一些反应组件(见上文)
但是我这次在设置标题的时候,需要知道有多少条未读消息。我不知道这一点,直到行动已经启动并且所有商店都更新了数据,所以前两个选项似乎已经过时了。
编辑:
发布后,我发现 this gist 似乎在调度程序上注册回调,但不是商店。这是正确的方法吗?如果不是商店,你会怎么称呼它?
标题是您应用程序状态的一部分,因此您需要一个商店来保存它,比如 TitleStore
。当它发生变化时,您需要将更改应用到 window:
TitleStore.on('change', function() {
document.title = TitleStore.getTitle();
});
或者您可以将其实现为 React 组件。它会在安装时应用更改(或使用此模块:https://github.com/gaearon/react-document-title)。
还剩下一件事:改变商店的行动。您可能想创建一个特殊的操作,例如 SET_TITLE
,但这是绝对错误的。操作应该是用户所做的事情,而不是你想要发生的事情。相反,您应该使用现有的操作,例如 LINK_CLICKED
或 THREAD_SELECTED
等。其他商店会相应地对此操作做出反应,您可以在 waitFor
的帮助下使用它们来更新标题。
假设我从 Facebook flux-chat 示例开始。有多个线程,每个线程都有消息。我想编写代码,以便当我单击导航到不同的线程时,相应地更改页面标题。
页面标题是谁设置的?
- 线程列表组件中的点击处理程序(不太可能)
- 被组件调用的动作创建者
- 我创建的一个监听 navigation-related 动作的新商店
- 实际上 DOM 不存在的新 React 组件(页面标题有点像自定义视图组件,对吧?)
现在假设我想更进一步,在用户收到新消息时实现一个闪烁的页面标题,如 Facebook。当收到新消息时,它会通过一些网络套接字或 AJAX 响应处理程序。
现在谁来设置页面标题?
- 这个新的消息处理程序
- 处理程序调用的动作创建者
- 一些新店(见上文)
- 一些反应组件(见上文)
但是我这次在设置标题的时候,需要知道有多少条未读消息。我不知道这一点,直到行动已经启动并且所有商店都更新了数据,所以前两个选项似乎已经过时了。
编辑:
发布后,我发现 this gist 似乎在调度程序上注册回调,但不是商店。这是正确的方法吗?如果不是商店,你会怎么称呼它?
标题是您应用程序状态的一部分,因此您需要一个商店来保存它,比如 TitleStore
。当它发生变化时,您需要将更改应用到 window:
TitleStore.on('change', function() {
document.title = TitleStore.getTitle();
});
或者您可以将其实现为 React 组件。它会在安装时应用更改(或使用此模块:https://github.com/gaearon/react-document-title)。
还剩下一件事:改变商店的行动。您可能想创建一个特殊的操作,例如 SET_TITLE
,但这是绝对错误的。操作应该是用户所做的事情,而不是你想要发生的事情。相反,您应该使用现有的操作,例如 LINK_CLICKED
或 THREAD_SELECTED
等。其他商店会相应地对此操作做出反应,您可以在 waitFor
的帮助下使用它们来更新标题。