Connected vs Top Down

connected_top_down.js

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { createStore, Store } from 'redux';
import { connect, Provider } from 'react-redux';
import ReactElement = React.ReactElement;
import { List } from 'immutable';

const values = List<number>().withMutations(list => {
  for (let i = 0; i < 1000; ++i) list.push(i);
});

function reducer(state: List<number> = values, action : any) : List<number> {
  switch (action.type) {
    case 'INCR': return state.set(action.index, state.get(action.index) + 1);
    default: return state;
  }
}

function ChildComponent({value, onClick}: {value: number, onClick: () => void}): ReactElement<{value: number}> {
  return <div><button onClick={onClick}>increment</button>{value}</div>;
}

function createConnectChildComponent(index: number): React.ComponentClass<{}> {
  return connect((state: List<number>) => ({
    value: state.get(index)
  }), {
    onClick: () => ({ type: 'INCR', index })
  })(ChildComponent);
}

class Connected extends React.Component<{store: Store<List<number>>}, {}> {
  render() {
    return (<Provider store={this.props.store}>
      <div>
        {values.map((_, i) => {
          const Child = createConnectChildComponent(i);
          return <Child key={i} />
        })}
      </div>
    </Provider>);
  }
}

class TopDown extends React.Component<{store: Store<List<number>>}, {values: List<number>}> {
  componentWillMount() {
    const { store } = this.props;
    this.setState({values: store.getState()});
    store.subscribe(() => {
      this.setState({values: store.getState()});
    });
  }

  render() {
    return (<div>
      {this.state.values.map((value, index) =>
          <ChildComponent key={index} value={value} onClick={() => this.props.store.dispatch({type: 'INCR', index})} />)}
    </div>);
  }
}

ReactDOM.render(<Connected store={createStore(reducer)} />, document.getElementById('root1'));
ReactDOM.render(<TopDown store={createStore(reducer)} />, document.getElementById('root2'));