title: Split reducers operating on the same slice of data in redux
body: <p>I have a store which is shaped like this: 
  </p>
  
  <pre><code>{
    // ...data
  
    user: {
      warranties: {
        W_1: ['O_1', 'O_2'],
        W_2: ['O_3', 'O_4']   
      }
    }
  }
  </code></pre>
  
  <p>Where keys starting with <code>W_</code> are warranties, keys starting with <code>O_</code> are options.</p>
  
  <p>For each <strong>warranty</strong> I have one or more <strong>options</strong> associated to it, relations in <code>user.warranties</code> are in the form: <code>warranty =&gt; [options]</code>.</p>
  
  <p>To achieve it I'm combining my reducers like this:
  </p>
  
  <pre><code>rootReducer = combineReducers({
    // ...other main reducers
  
    user: combineReducers({
      // ...other user reducers
      warranties
    })
  })
  </code></pre>
  
  <hr>
  
  <p>Now, the "<em>problem</em>" is that both <code>USER_WARRANTY</code> and <code>USER_OPTION</code> actions are handled by the same reducer, because:</p>
  
  <ul>
  <li><p>When I add an option, I need to push it to the correct warranty entry.</p></li>
  <li><p>Inversely when I add a warranty I need to populate it with its default options.</p></li>
  <li><p>And ultimately, they operate on the same slice of data</p></li>
  </ul>
  
  <p>So the <code>warranties</code> reducer, has to react to both actions, looking like this:
  </p>
  
  <pre><code>export default function warranties(state = {}, action) {
    switch (action.type) {
      case USER_WARRANTIES_ADD:
      // add warranty key to `user.warranties`
  
      case USER_WARRANTIES_REMOVE:
      // remove warranty key from `user.warranties`
  
      case USER_OPTIONS_ADD:
      // push option to `user.warranties[warrantyID]`
  
      case USER_OPTIONS_REMOVE:
      // remove option from `user.warranties[warrantyID]`
  
      default:
        return state
    }
  }
  </code></pre>
  
  <p>I would like to split this in two reducers, <code>warranties</code> and <code>options</code>, but still have them operate on the same slice of data.</p>
  
  <p>Ideally I would then compose my root reducer like this:
  </p>
  
  <pre><code>rootReducer = combineReducers({
    // ...other main reducers
  
    user: combineReducers({
      // ...other user reducers
      warranties: magicalCombine({
        warranties,
        options
      })
    })
  })
  </code></pre>
  
  <p>Where <code>magicalCombine</code> is the function I am having troubles to find.</p>
  
  <hr>
  
  <p>I have tried <a href="https://github.com/redux-utilities/reduce-reducers" rel="nofollow noreferrer"><code>reduce-reducers</code></a>, but looks like the second reducer (<code>options</code>) is never actually reached, and I'm actually unsure about it since I'm not trying to achieve flat state, but actually operate on the same key.</p>