Counter.js

const Counter = ({ count, onIncrementClick, onDecrementClick, onIncrementAsyncClick }) => (
  <div>
    {count}
    :
    <button onClick={onIncrementClick}>+</button>
    /
    <button onClick={onDecrementClick}>-</button>
    /
    <br/>
    <button onClick={onIncrementAsyncClick}>+ Async</button>
  </div>
);

export default Counter;

CounterController.js

class CounterController extends React.Component<> {
  constructor() {
    this.onIncrementClick = this.onIncrementClick.bind(this);
    this.onDecrementClick = this.onDecrementClick.bind(this);
    this.onIncrementAsyncClick = this.onIncrementAsyncClick.bind(this);
  }
  
  onIncrementClick() {
    // 規模そこそこ以上だったら、直接dispatchをpropsで受け取ってゴニョゴニョじゃなくて、
    // 腹にdispatchを持ったFooServiceのインスタンスをcontextかpropsかで受け取って、this.props.fooService.bar()みたいにすると思う
    this.props.dispatch({ type: "INCREMENT" });
  }
  
  onDecrementClick() {
    this.props.dispatch({ type: "DECREMENT" });
  }
  
  onIncrementAsyncClick() {
    setTimeout(() => this.props.dispatch({ type: "INCREMENT" }), 100);
  }
  
  render() {
    return (
      <Counter
        onIncrementClick={this.onIncrementClick}
        onDecrementClick={this.onDecrementClick}
        onIncrementAsyncClick={this.onIncrementAsyncClick}
      />
    );
  }
}

export default CounterController;

main.js

document.addEventListener('DOMContentLoaded' () => {
  // ...  

  const ConnectedCounterController = connect(({ counter }) => ({ counter }))(CounterController);
  
  // ...
});