How-to-Set-a-Document-Title-with-ReactJS-Flux.md

Files

A basic stucture of a React+Flux application (see other examples)

 - /src/actions/PageActions.js    - Flux action creator
 - /src/constants/ActionTypes.js  - Flux action types
 - /src/layouts/DefaultLayout.js  - Page layout reused accross multiple top-level components
 - /src/pages/DemoPage.js         - A top-level react component (page)
 - /src/stores/PageStore.js       - Flux store
 - /src/app.js                    - Application entry point / bootstrap
 - /src/AppDispatcher.js          - Flux dispatcher

Top-level Component: Example 1

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.setTitle(PAGE_TITLE); // <-- Set the page title
  },

  render() {
    return (
      <div className="container">
        <h1>{PAGE_TITLE}</h1>
        <p>Demo page</p>
      </div>
    );
  }
});

module.exports = DemoPage;

Top-level Component: Example 2

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.setTitle(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.

Page Actions

// src/actions/PageActions.js

var AppDispatcher = require('../AppDispatcher');
var ActionTypes = require('../constants/ActionTypes');

var PageActions = {

  setTitle(text) {
    AppDispatcher.handleViewAction({
      actionType: ActionTypes.SET_PAGE_TITLE,
      text: text
    });
  }

};

module.exports = PageActions;

Application Entry Point

// src/app.js

var AppDispatcher = require('./AppDispatcher');
var ActionTypes = require('./constants/ActionTypes');
var ExecutionEnvironment = require('react/lib/ExecutionEnvironment');

AppDispatcher.register((payload) => {

  switch (payload.action.actionType)
  {
    case ActionTypes.SET_PAGE_TITLE:
      if (ExecutionEnvironment.canUseDOM) {
        document.title = payload.action.text;
      }
      break;
  }

  return true;
});

Sample App

https://github.com/kriasoft/react-starter-kit