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

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

谁设置页面标题?

>线程列表组件中的单击处理程序(不太可能)
>组件调用的动作创建者
>我创建的新商店将监听与导航有关的操作
>一个实际上没有DOM存在的新react组件(页面标题有点像自定义视图组件,对吗?)

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

现在谁来设置页面标题?

>这个新的消息处理程序
>处理程序调用的动作创建者
>一些新商店(见上文)
>一些反应成分(见上文)

但是,这次我设置标题时,我需要知道有多少未读邮件.在行动被触发并且所有商店都更新了数据之前,我不知道这一点,因此似乎前两个选项已经退出.

编辑:

发布后,我发现this gist似乎在调度程序上注册了回调,但它不是商店.这是正确的方法吗?如果没有商店,您会怎么称呼它?

解决方法:

标题是应用程序状态的一部分,因此您需要一个商店来保存它,例如TitleStore.更改后,您需要将更改应用于窗口:

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

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

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

上一篇:javascript-返回将组件和状态混合在一起的React组件


下一篇:在Android上运行react-native的运行教程’AwesomeProject’导致’无法下载JS Bundle’红屏