How to use the fluxible-addons-react.provideContext function in fluxible-addons-react

app.rehydrate(window.App, (err, context) => {
    let isRehydrating = true;

    if (err) {
        throw err;
    }

    debug('React Rendering');

    const RouterWithContext = provideContext(Router, app.customContexts);

    ReactDOM.hydrate(
         {
                        /* emit an event? */
                    })
                    .catch(fetchDataErr => {
                        console.error(fetchDataErr.stack);

if (process.env.NODE_ENV === "production") {
  // on production, include scripts and css from the webpack stats
  const config = require("../../webpack/prod.config");
  const stats = require("../../static/dist/stats.json");
  scripts.push(`${config.output.publicPath}${stats.main}`);
  css.push(`${config.output.publicPath}${stats.css}`);
}
else {
  // on development, use the webpack dev server config
  // css are not needed since they are injected inline with webpack
  const config = require("../../webpack/dev.config");
  scripts.push(`${config.output.publicPath}${config.output.filename}`);
}


@provideContext()
@connectToStores([], context => {
  const htmlHeadStore = context.getStore("HtmlHeadStore");
  return {
    title: htmlHeadStore.getTitle(),
    description: htmlHeadStore.getDescription(),
    siteName: htmlHeadStore.getSiteName(),
    currentUrl: htmlHeadStore.getCurrentUrl(),
    images: htmlHeadStore.getImages()
  };
})
class Html extends React.Component {

  static propTypes = {
    context: PropTypes.object.isRequired,
    lang: PropTypes.string.isRequired,
    state: PropTypes.string.isRequired,

if (newProps.pageTitle === prevProps.pageTitle) {
            return;
        }
        document.title = newProps.pageTitle;
        if(this.props.ErrorStore.error)
            context.executeAction(cleanStore);
    }
}
Application.contextTypes = {
    getStore: PropTypes.func,
    executeAction: PropTypes.func,
    getUser: PropTypes.func,
    intl: PropTypes.object.isRequired
};

Application = provideContext(Application, { //jshint ignore:line
    getUser: PropTypes.func
});

export default provideContext(handleHistory(connectToStores(
    DragDropContext(HTML5Backend)(Application),
    [ApplicationStore, ErrorStore],
    (context, props) => {
        let appStore = context.getStore(ApplicationStore);
        return {
            pageTitle: appStore.getPageTitle(),
            showActivationMessage: appStore.getActivationMessage(),
            ErrorStore: context.getStore(ErrorStore).getState(),
        };
    }
)));

{Handler}
                
                <div role="footer" id="footer">
                    <div>
                        <small>All code on this site is licensed under the <a href="https://github.com/yahoo/fluxible.io/blob/master/LICENSE.md">Yahoo BSD License</a>, unless otherwise stated.</small> <small>© 2015 Yahoo! Inc. All rights reserved.</small>
                    </div>
                </div>
            
        );
    }
}


Application = provideContext(
    handleHistory(
        connectToStores(Application, ['DocStore'], (context) =&gt; ({
            currentTitle: context.getStore('DocStore').getCurrentTitle() || '',
            currentDoc: context.getStore('DocStore').getCurrent()
        }))
    ),
    {
        query: PropTypes.object,
        devtools: PropTypes.object
    }
);

export default Application;

componentDidUpdate(prevProps, prevState) {
        const newProps = this.props;
        if (newProps.pageTitle === prevProps.pageTitle) {
            return;
        }
        document.title = newProps.pageTitle;
    }
}

Application.propTypes = {
    currentRoute: PropTypes.object,
    pageTitle: PropTypes.string
};

export default provideContext(handleHistory(connectToStores(
    Application,
    [ApplicationStore],
    function (context, props) {
        var appStore = context.getStore(ApplicationStore);
        return {
            pageTitle: appStore.getPageTitle()
        };
    }
)));

<div id="docsapp"></div>
                    
                    
                    
                
            
        );
    }
}

Html = provideContext(
    connectToStores(Html, ['DocStore'], (context) =&gt; ({
        currentTitle: context.getStore('DocStore').getCurrentTitle() || '',
        currentDoc: context.getStore('DocStore').getCurrent() || {}
    }))
);

export default Html;

function renderApp(context, app) {
    appDebug('React Rendering');

    ga.initialize('UA-74401232-1');

    function navigate() {
        if (window && window.location.hostname !== 'localhost') {
            ga.pageview(this.state.location.pathname);
        }
        var route = _.cloneDeep(this.state.location);
        context.executeAction(navigateAction, route);
    }

    let RouterWithContext = provideContext(Router, app.customContexts);

    ReactDOM.render(
        ,
        document.getElementById('app'), () => {
            appDebug('React Rendered');
        }
    );
}

if(this.props.ErrorStore.error)
            context.executeAction(cleanStore);
    }
}
Application.contextTypes = {
    getStore: PropTypes.func,
    executeAction: PropTypes.func,
    getUser: PropTypes.func,
    intl: PropTypes.object.isRequired
};

Application = provideContext(Application, { //jshint ignore:line
    getUser: PropTypes.func
});

export default provideContext(handleHistory(connectToStores(
    DragDropContext(HTML5Backend)(Application),
    [ApplicationStore, ErrorStore],
    (context, props) => {
        let appStore = context.getStore(ApplicationStore);
        return {
            pageTitle: appStore.getPageTitle(),
            showActivationMessage: appStore.getActivationMessage(),
            ErrorStore: context.getStore(ErrorStore).getState(),
        };
    }
)));

}
    render() {
        var Handler = this.props.currentRoute.handler;
        //render content
        return (
            <div>
                <nav>
                
                
            </nav></div>
        );
    }
}

Application = (
    provideContext(
        handleHistory(
            connectToStores(Application, [ApplicationStore], (context) =&gt; ({
                ApplicationStore: context.getStore(ApplicationStore).getState()
            })),
            {enableScroll: false}
        )
    )
);

export default Application;

.then(() => {
                    const appState = app.dehydrate(context);
                    appState.env = process.env.NODE_ENV || 'local';
                    res.expose(appState, 'App');

                    const props = Object.assign(
                                        {},
                                        renderProps,
                                        { context: context.getComponentContext() }
                                    );

                    const RouterComponent = provideContext(RouterContext, app.customContexts);
                    const HtmlComponent = provideContext(Html, app.customContexts);

                    const markup = ReactDOMServer.renderToString(
                                        React.createElement(RouterComponent, props)
                                    );

                    const html =
                        ReactDOMServer.renderToStaticMarkup(
                            React.createElement(HtmlComponent, {
                                title: 'react-flux-gulp-starter - madeinhaus.com',
                                context: context.getComponentContext(),
                                state: res.locals.state,
                                markup,
                                location,
                            }
                        ));