Give each component its own selector

as described here: http://redux.js.org/docs/recipes/ComputingDerivedData.html

Author: mweststrate

components/TodoItem.js

@@ -77,16 +77,18 @@ TodoItem.propTypes = {
  completeTodo: PropTypes.func.isRequired
 }
 
-const relatedTodoSelector = createSelector(
+const relatedTodoSelectorFactory = () => createSelector(
  [
  state => state.todos,
  (_, ownProps) => ownProps.todo.other
  ],
  (todos, otherId) => ({ other: otherId === null ? null : todos[otherId] })
 )
 
+const makeMapStateToProps = () => relatedTodoSelectorFactory();
+
 const ConnectedTodoItem = connect(
- relatedTodoSelector
+ makeMapStateToProps
 )(TodoItem)
 
 // MWE: export TodoItem for the plain scenario,

package.json

@@ -22,8 +22,8 @@
  "pure-render-mixin": "^1.0.2",
  "react": "^0.14.7",
  "react-dom": "^0.14.7",
- "react-redux": "^4.2.1",
- "redux": "^3.2.1",
+ "react-redux": "^4.4.1",
+ "redux": "^3.3.1",
  "reselect": "^2.3.0"
  },
  "devDependencies": {