title: React Apollo and Redux: Combine custom reducers with Apollo state
body: <p>When using <code>react-apollo</code> with redux, data from the server is cached in the redux store under an <code>apollo</code> key:</p>
  
  <pre><code>{
      apollo: // results from Apollo queries
  }
  </code></pre>
  
  <p>After creating your own reducers and corresponding state tree, your store might look like this:</p>
  
  <pre><code>{
      apollo: { ... },
      ui: {
          selectedItem: 2;
          showItems: 6
      }
  }
  </code></pre>
  
  <p>Imagine that there is an action which changes the value of <code>ui.selectedItem</code>, and that this value is the index of an item buried somewhere in the <code>apollo</code> object. </p>
  
  <p>With <a href="http://redux.js.org/docs/recipes/reducers/RefactoringReducersExample.html" rel="nofollow noreferrer">reducer composition</a>, reducers for our <code>ui</code> state will rightly have no access to anything under the Apollo state.</p>
  
  <p>In our component we can subscribe to changes on our <code>ui</code> state via <code>mapStateToProps</code>, and we can map Apollo results to props using the <code>react-apollo</code> GraphQL container (or <code>@graphql</code> decorator).</p>
  
  <p>But how can we update our store with values that are computed from Apollo results and other state in our application?</p>
  
  <p>For example, if <code>apollo.item.list</code> is an array of items, and <code>ui.selectedItem</code> is the index you want to target in that list - how could the store contain a value for: </p>
  
  <pre><code>apollo.item.list[ui.selectedItem]
  </code></pre>