The basic stucture of a React+Flux application (see other examples)
- /src/actions/PageActions.js - Action creator (Flux)
- /src/constants/ActionTypes.js - Action types (Flux)
- /src/core/Dispatcher.js - Dispatcher (Flux)
- /src/core/Store.js - Base class for stores (Flux)
- /src/layouts/DefaultLayout.js - Page layout reused accross multiple top-level components
- /src/pages/DemoPage.js - Top-level react component (page)
- /src/stores/PageStore.js - Store (Flux)
- /src/app.js - Application's main file (entry point)
When document title is known up front and is static:
// src/pages/DemoPage.js
var React = require('react');
var PageActions = require('../actions/PageActions');
var DefaultLayout = require('../layouts/DefaultLayout');
var PAGE_TITLE = 'Some Page Title';
var DemoPage = React.createClass({
statics: {
layout: DefaultLayout
},
componentWillMount() {
PageActions.set({title: PAGE_TITLE}); // <-- Set the page title
},
render() {
return (
<div className="container">
<h1>{PAGE_TITLE}</h1>
<p>Demo page</p>
</div>
);
}
});
module.exports = DemoPage;When document title is generated based on a newly obtained data from a Flux store:
// src/pages/UserProfile.js
var React = require('react');
var PageActions = require('../actions/PageActions');
var DefaultLayout = require('../layouts/DefaultLayout');
var UserStore = require('../stores/UserStore');
var UserProfile = React.createClass({
statics: {
layout: DefaultLayout
},
getInitialData() {
return {
profile: UserStore.getProfile()
};
},
componentWillMount() {
PageActions.set({title: this.state.profile.fullName}); // <-- Set the page title
},
render() {
return (
<div className="container">
<h1>{this.state.profile.fullName}</h1>
<p>Demo page</p>
</div>
);
}
});
module.exports = UserProfile;Note: componentWillMount() executes on both server and client, while componentDidMount() on client only.
// src/actions/PageActions.js
var AppDispatcher = require('../core/AppDispatcher');
var ActionTypes = require('../constants/ActionTypes');
var PageActions = {
/**
* Set an object representing the current web page.
* @param {{title: string, description: string}} page
*/
set(page) {
AppDispatcher.handleViewAction({
actionType: ActionTypes.SET_CURRENT_PAGE,
page: page
});
}
};
module.exports = PageActions;// src/app.js
var AppDispatcher = require('./core/AppDispatcher');
var ActionTypes = require('./constants/ActionTypes');
var ExecutionEnvironment = require('react/lib/ExecutionEnvironment');
AppDispatcher.register((payload) => {
switch (payload.action.actionType)
{
case ActionTypes.SET_CURRENT_PAGE:
if (ExecutionEnvironment.canUseDOM) {
document.title = payload.action.page.title;
}
break;
}
return true;
});