client.tsx

import 'bootstrap/dist/css/bootstrap.css';
import './assets/styles/styles.css';

import 'fetch-everywhere';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {History, createBrowserHistory} from 'history';
import {AppContainer as ReactHotLoader} from 'react-hot-loader';
import {AsyncComponentProvider} from 'react-async-component';
import asyncBootstrapper from 'react-async-bootstrapper';
import RouterWrapper from './RouterWrapper';
import ProviderService from './services/ProviderService';
import IStore from './stores/IStore';
import ISagaStore from './stores/ISagaStore';

const codeSplittingState = window.__ASYNC_COMPONENTS_STATE__;
const serverState: IStore = window.__STATE__;
const initialState: IStore = {
    ...serverState,
    renderReducer: {
        ...serverState.renderReducer,
        isServerSide: false,
    },
};

const history: History = createBrowserHistory();
const store: ISagaStore<IStore> = ProviderService.createProviderStore(initialState, history);
const rootEl: HTMLElement = document.getElementById('root');

delete window.__STATE__;
delete window.__ASYNC_COMPONENTS_STATE__;

const composeApp = (Component: any) => (
    <ReactHotLoader key={Math.random()}>
        <AsyncComponentProvider rehydrateState={codeSplittingState}>
            <Component store={store} history={history} />
        </AsyncComponentProvider>
    </ReactHotLoader>
);

const renderApp = () => {
    const routerWrapper = require('./RouterWrapper').default; // tslint:disable-line:no-require-imports

    ReactDOM.render(
        composeApp(routerWrapper),
        rootEl,
    );
};

asyncBootstrapper(composeApp(RouterWrapper)).then(renderApp);

if (module.hot) {
    module.hot.accept('./RouterWrapper', renderApp);
}