title: How to compose redux reducers with dependent state
body: <p>I am working on a React/Redux application that allows for "widgets" to be added to a page and manipulated in 2D space. It is a requirement that multiple widgets can be selected and manipulated at once. A simplified version of my current state tree looks something like the following...</p>
  
  <pre><code>{
    widgets: {
      widget_1: { x: 100, y: 200 },
      widget_2: { x: 300, y: 400 },
      widget_3: { x: 500, y: 600 }
    },
    selection: {
      widgets: [ "widget_1", "widget_3" ]
    }
  }
  </code></pre>
  
  <p>I currently have this tree managed by 2 reducers one managing <code>widgets</code> state and the other managing <code>selection</code> state. The selection state reducer can be simplified as (note: I am using Immutable.js too)...</p>
  
  <pre><code>currentlySelectedWidgets(state = EMPTY_SELECTION, action) {
    switch (action.type) {
      case SET_SELECTION:
        return state.set('widgets' , List(action.ids));
      default:
        return state
    }
  }
  </code></pre>
  
  <p>This all seems to work quite well but I now have a requirement that I am struggling to fit into this model... </p>
  
  <p>For UI purposes I need to have the current selection have an x/y property which is reflective of the upper left corner of the currently selected widgets x/y co-ordinates. An example state might look like...</p>
  
  <pre><code>{
    widgets: {
      widget_1: { x: 100, y: 200 },
      widget_2: { x: 300, y: 400 },
      widget_3: { x: 500, y: 600 }
    },
    selection: {
      x: 100,
      y: 200,
      widgets: [ "widget_1", "widget_3" ]
    }
  }
  </code></pre>
  
  <p>The logic here is fairly simple, e.g. find the <code>min()</code> of all the selected widgets <code>x</code> and <code>y</code> values but I am unsure of how I should handle this in terms of reducer composition as the <code>currentlySelectedWidgets</code> reducer has no access to the <code>widgets</code> part of the state tree. I have considered...</p>
  
  <ul>
  <li>merging the reducers into one reducer: this doesn't seem like a great scalable solution.</li>
  <li>passing the current list of widgets around with the action: this seems particularly nasty.</li>
  <li>finding a better way to model the state tree: I've had a think but any alternative versions seem to have other drawbacks.</li>
  <li>Building a custom <code>combineReducers()</code> that can feed the widgets list into my <code>currentlySelectedWidgets()</code> reducer as an additional argument: I think this might be my best bet.</li>
  </ul>
  
  <p>I am keen to hear any other suggestions on how others are managing similar situations, it seems like managing a "current selection" must be a common state problem that others must have had to solve.</p>