App.tsx

import * as React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import { ComponentProvider } from '@micro-frontend-react/core/lib/ComponentProvider';
import { Context } from '@micro-frontend-react/core/lib/Context';
import { ReducerRegistry } from '@micro-frontend-react/redux/lib/ReducerRegistry';
import { StoreBuilder } from '@micro-frontend-react/redux/lib/StoreBuilder';
import { injectReduxContext } from '@micro-frontend-react/redux/lib/InjectReduxContext';
import { DummyHttpClient } from './DummyHttpClient';
import { hostReducer, HostState } from './SampleHostReduxStore';
import { Home } from './Home';

const httpClient = new DummyHttpClient();
const reducerRegistry = new ReducerRegistry().register('host', hostReducer);
const appName = 'DemoApp';

const storeBuilderResult = new StoreBuilder(reducerRegistry, {})
  .configureLogger(__IS_DEVELOPMENT__)
  .configureSaga({ httpClient, appName })
  .build();

export type AppState = {
  host: HostState;
};

export function App(): React.ReactElement {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route
          path="/micro-frontend"
          render={() => (
            <ComponentProvider
              config={{
                script: 'http://localhost:8000/bundles/micro-frontend-app.js',
                name: 'MicroFrontendApp',
              }}
            />
          )}
        />
      </Switch>
    </BrowserRouter>
  );
}

render(
  <Provider store={storeBuilderResult.store}>
    <Context.Provider value={injectReduxContext(storeBuilderResult)}>
      <App />
    </Context.Provider>
  </Provider>,
  document.getElementById('app')
);