import * as React from 'react';

export interface PagePropsFromState {
  title: string;
}
export interface PagePropsFromDispatch {
  loadPage: (name: string, websocket: WebSocket) => void;
}
export interface PageOwnProps {
  websocket: WebSocket;
}
export type PageProps = PagePropsFromState & PagePropsFromDispatch & PageOwnProps;

interface PageState {
  counter: number;
}

export default class Page extends React.Component<PageProps, PageState> {
  constructor(props: PageProps) {
    super(props);
    this.state = {
      counter: 0
    };
  }

  onClick = () => {
    let counter = this.state.counter + 1;
    if (counter > 5) {
      this.props.loadPage('home', this.props.websocket);
      return;
    }
    this.setState({counter: counter});
  }

  render() : {
    return (
      <span onClick={this.onClick}>
        {this.props.title} clicks: {this.state.counter}
      </span>
    );
  }
}

import { bindActionCreator, Dispatch } from 'redux';
import { connect } from 'react-redux';
import { loadPage } from '../actions';
import { State } from '../reducers';
import Page, { PageOwnProps, PagePropsFromDispatch, PagePropsFromState } from '../components/Page';

const mapStateToProps = (state: State) => ({
  title: getTitle(state)
});

const mapDispatchToProps = (dispatch: Dispatch<State>) => bindActionCreator(loadPage, dispatch);

const PageContainer = connect<PagePropsFromState, PagePropsFromDispatch, PageOwnProps>(
  mapStateToProps,
  mapDispatchToProps
)(Page);

export default PageContainer;

import * as React from 'react';
import { Store } from 'redux';
import { asyncComponent, AsyncComponentProvider } from 'react-async-component';
import ReconnectingWebSocket from 'reconnectingwebsocket';
import { State } from './reducers';
import HomePage from './containers/HomeContainer';

const AsyncPage = asyncComponent({
  name: 'Page',
  resolve: () => import(/* webpackChunkName: "page" */ './containers/PageContainer')
});

export interface AppProps {
  currentPage: string;
}
interface AppState {}

export default class App extends React.Component<AppProps, AppState> {
  ws: ReconnectingWebSocket;

  constructor(props: AppProps) {
    super(props);
    this.ws = new ReconnectingWebSocket(`${process.env.REACT_APP_SOCKET}`, ['my_app'], {
        reconnectInterval: 10000,
        maxReconnectInterval: 10000,
        reconnectDecay: 1.5
      });
  }

  render() {
    return (
      <AsyncComponentProvider>
        { currentPage === 'home' &&
          <HomePage websocket={this.ws} />
        }
        { currentPage === 'page' &&
          <AsyncPage websocket={this.ws} />
        }
      </AsyncComponentProvider>
    );
  }
}

Types of property 'resolve' are incompatible.
    Type '() => Promise<typeof "./containers/PageContainer">' is not assignable to type '() => Promise<ComponentType<{}>>'.
      Type 'Promise<typeof "./containers/PageContainer">' is not assignable to type 'Promise<ComponentType<{}>>'.
        Type 'typeof "./containers/PageContainer"' is not assignable to type 'ComponentType<{}>'.
          Type 'typeof "./containers/PageContainer"' is not assignable to type 'StatelessComponent<{}>'.
            Type 'typeof "./containers/PageContainer"' provides no match for the signature '(props: { children?: ReactNode; }, context?: any): ReactElement<any> | null'.