Whose job in Flux / React sets the page title?
Let's say I start with the Facebook Flash Chat example. There are several message streams. I want to write some code so that when I click to go to another thread, I change the title of the page accordingly.
Who sets the title of the page?
- Click handler in threadlist component (unlikely)
- Action creator called by the component
- A new store I am creating that listens for navigation related actions
- A new react component that doesn't actually have a DOM present (the page header is like a custom view component, right?)
Now let's say that I want to go a step further and implement a blinking page title like Facebook when the user receives a new message. When a new message arrives, it comes through some web socket or AJAX response handler.
Now who sets the title of the page?
- This new message handler
- Action creator called by handler
- Some new stores (see above)
- Some reactive components (see above)
But when I set the header this time, I need to know how many unread messages there are. I don't know this until the action is triggered and all stores have updated the data, so it seems like the first two options are missing.
Edit:
Upon posting, I discovered this gist , which seems to register for the dispatcher callback, but is not a store. Is it correct? What would you call this thing if it wasn't for the store?
source to share
The title is part of the state of your application, so you need to store it, say TitleStore
. When it changes, you need to apply the changes to the window:
TitleStore.on('change', function() {
document.title = TitleStore.getTitle();
});
Or you can implement this as a React component. It will apply the change to mount (or use this module: https://github.com/gaearon/react-document-title ).
One thing remains: actions that change the store. You might be tempted to create a custom action, for example SET_TITLE
, but that is completely wrong. Actions should be something the user does, not what you want. Instead, you should use existing actions like LINK_CLICKED
or THREAD_SELECTED
etc. Other stores will respond to these actions accordingly, and you can use them to update the title with waitFor
.
source to share