Add a simple but reasonably fast Redux version

package.json

@@ -16,7 +16,7 @@
     "mobx-react-devtools": "^4.2.10",
     "react": "^15.4.1",
     "react-dom": "^15.4.1",
-    "react-redux": "next",
+    "react-redux": "^4.4.6",
     "redux": "^3.6.0"
   },
   "scripts": {

src/App.js

@@ -7,12 +7,14 @@ const MobXCanvas = require('bundle?lazy&name=MobXCanvas!./MobXCanvas')
 const ReduxCanvas = require('bundle?lazy&name=ReduxCanvas!./ReduxCanvas')
 const ReduxCanvasV2 = require('bundle?lazy&name=ReduxCanvasV2!./ReduxCanvasV2')
 const ReduxCanvasV3 = require('bundle?lazy&name=ReduxCanvasV3!./ReduxCanvasV3')
+const ReduxCanvasV4 = require('bundle?lazy&name=ReduxCanvasV4!./ReduxCanvasV4')
 
 const availableExperiments = {
   MobXCanvas,
   ReduxCanvas,
   ReduxCanvasV2,
-  ReduxCanvasV3
+  ReduxCanvasV3,
+  ReduxCanvasV4
 }
 
 class App extends Component {

src/ReduxCanvasV4.js

@@ -0,0 +1,61 @@
+import Immutable from 'immutable'
+import React from 'react'
+import { Provider, connect } from 'react-redux'
+import createStore from './createStore'
+import Pixel from './Pixel'
+
+// Reducer
+const store = createStore((state = Immutable.Map(), action) => {
+  if (action.type === 'TOGGLE') {
+    const key = action.i + ',' + action.j
+    return state.set(key, !state.get(key))
+  }
+  return state
+})
+
+const ACTIVE_PROPS = { active: true }
+const INACTIVE_PROPS = { active: false }
+
+// Connected pixel
+const ConnectedPixel = connect(
+  (initialState, initialProps) => {
+    const { i, j } = initialProps
+    return state => {
+      const active = state.get(i + ',' + j) || false
+      return active ? ACTIVE_PROPS : INACTIVE_PROPS
+    }
+  },
+  (initialState, initialProps) => (dispatch) => {
+    const { i, j } = initialProps
+    return {
+      onToggle() {
+        dispatch({ type: 'TOGGLE', i, j })
+      }
+    };
+  },
+  (stateProps, dispatchProps, ownProps) => ({
+    i: ownProps.i,
+    j: ownProps.j,
+    active: stateProps.active,
+    onToggle: dispatchProps.onToggle
+  })
+)(Pixel);
+
+// Root component
+function ReduxCanvas () {
+  const items = [ ]
+  for (let i = 0; i < 127; i++) {
+    for (let j = 0; j < 127; j++) {
+      items.push(<ConnectedPixel i={i} j={j} key={i + ',' + j} />)
+    }
+  }
+  return (
+    <Provider store={store}>
+      <div>
+        {items}
+      </div>
+    </Provider>
+  )
+}
+
+export default ReduxCanvas

src/createStore.js

@@ -1,8 +1,11 @@
 import { createStore as originalCreateStore } from 'redux'
 
 export function createStore (reducer) {
-  const extension = window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
-  return originalCreateStore(reducer, extension)
+  let enhancer
+  if (process.env.NODE_ENV !== 'production' && window.__REDUX_DEVTOOLS_EXTENSION__) {
+    enhancer = window.__REDUX_DEVTOOLS_EXTENSION__()
+  }
+  return originalCreateStore(reducer, enhancer)
 }
 
 export default createStore