grid react-redux

Starting point for creating JSFiddles with React. This uses React with Addons.

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clone/2.1.1/clone.js"></script>
<script src="https://npmcdn.com/react@15.6.1/dist/react-with-addons.min.js"></script>
<script src="https://npmcdn.com/react-dom@15.6.1/dist/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.7.2/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/5.0.5/react-redux.min.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

CSS

.box{position: absolute}

JavaScript 1.7

var Provider = ReactRedux.Provider;
var connect = ReactRedux.connect;

var gridWidth = 50;
var gridHeight = 50;

var grid = [];
for (var y = 0; y < gridHeight; y++) {
  grid.push([]);
  for (var x = 0; x < gridWidth; x++) {
    grid[y][x] = { c: 0 };
  }
}

var reducer = (state = grid, action) => {
  if (action.type === "CC") {
  	const { x, y, c } = action.payload;
    
    const newState = [...state];
    newState[y][x] = { c };
    
    return newState;
  }

	return state;
};

var store = Redux.createStore(reducer);

var colours = ["black", "grey"];

class Box extends React.Component {
  constructor(props) {
    super(props);
    
    this.width = 15;
    this.handleClick = this.handleClick.bind(this);
  }
  
  shouldComponentUpdate(nextProps) {
		return nextProps.colour !== this.props.colour;
  }
  
  handleClick() {
  	const { x, y } = this.props;
	  const payload = { c: 1, x, y };
  	this.props.dispatch({ type: "CC", payload });  
  }
  
  render() {
    console.log(`Box(${this.props.x}, ${this.props.y}) render`);

  	const style = {
    	top: this.props.y * this.width,
      left: this.props.x * this.width,
      width: this.width,
      height: this.width,
      background: this.props.colours[this.props.colour]
    };

    return (
      <div
        className="box"
        style={style}
        onMouseOver={this.handleClick}
      />
    );
  }
}

const ConnectedBox = connect((store, { x, y }) => ({
	colour: store[y][x].c
}))(Box);

class Grid extends React.Component {
	shouldComponentUpdate(nextProps) {
    return false;
	}
    
	render() {
    console.log("<Grid render />");
    const { colours } = this.props;
    
    return (
      <div>
        {this.props.grid.map((row, y) => 
	        row.map((box, x) => (
  		      <ConnectedBox
            	key={`${x}-${y}`}
              x={x}
              y={y}
              colours={colours}
            />
          ))
        )}
      </div>
    );
  }
}

var ConnectedGrid = connect(store => ({
  grid:...