title: How to make components independent on the state structure the same way reducers are
body: <p>Redux is all about reducer composition. You can nest them and combine then however you like. The important thing is that each reducer is totally unaware of the outer structure of the state. It only handles its own piece. </p>
  
  <p>Unfortunately, this doesn't apply to components. </p>
  
  <p>When you <code>connect</code> a component to redux, you usually define a function that maps the state to the component's props. What I don't find optimal is that this function always gets the whole app state as an argument.</p>
  
  <p>In an ideal case uf a component depended on data managed by a single reducer, I'd prefer if the component (or the <code>connect</code> function)... </p>
  
  <ol>
  <li>had access only to that data.</li>
  <li>didn't have to worry about where the data is located in the state's hierarchy.</li>
  </ol>
  
  <p>The whole component (or perhaps an app <em>module</em>/<em>section</em>) would be nicely decoupled from the rest of the app (which I think is the ideal that React has been striving for since the beginning).</p>
  
  <p>If nothing else, it'd make refactoring of the state's structure way simpler (right now it's easy to move around nested reducers but then you have to manually update all those so called <code>ContainerComponents</code> to match the new state structure).</p>
  
  <p>Is there a recommended way or perhaps a pattern how to achieve this kind of decoupling on the component level?</p>