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?
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
.