title: redux state selectors in top level reducer
body: <p>After watching the <a href="https://egghead.io/courses/building-react-applications-with-idiomatic-redux" rel="nofollow">new egghead course</a> by Dan Abramov, I have question regarding the selectors that was mentioned.</p>
  
  <p>The purpose of the selectors is to hide the details of the state tree from the components, so that it is easy to manage code later if tree changes. </p>
  
  <p>If I understand it correctly, that means, the selectors called inside <code>mapStateToProps</code> should only be the ones that live in the top-level reducer. Because the <code>state</code> that is passed to <code>mapStateToProps</code> is the whole application state tree. If this is true, as the application grows, I can imagine it would become very difficult to manage the top level selectors.</p>
  
  <p>Have I miss understood the concept here? or is this a valid concern?</p>
  
  <p><strong>Edit</strong>: trying to make my question clearer.</p>
  
  <p>Say my whole state start with
  <code>{ byIds, listByFilter }</code> and I have </p>
  
  <pre><code>export const getIsFetching = (state, filter) =&gt;
    fromList.getIsFetching(state.listByFilter[filter]);
  </code></pre>
  
  <p>in my top level reducer <code>reducers/index.js</code>, and components would simply use <code>getIsFetching</code> passing the whole state to is, which is totally fine because it is the top level.</p>
  
  <p>However, later on, I decided my whole app is going to contain a todo app and an counter app. So it make sense to put the current top level reducers into <code>reducers/todo.js</code>, and create a new top level reducers <code>reducers/index.js</code> like this:</p>
  
  <pre><code>combineReducers({
    todo: todoReducer,
    counter: counterReducer
  })
  </code></pre>
  
  <p>at the point my state would be like </p>
  
  <pre><code>{
    todo: {
      byIds,
      listByFilter
    },
    counter: {
      // counter stuff
    }
  }
  </code></pre>
  
  <p>components can no longer use the <code>getIsFetching</code> from <code>reducers/todo.js</code>, because the state in <code>getIsFetching</code> is now actually dealing with <code>state.todo</code>. So i have to in the top level reducer <code>reducers/index.js</code> export another selector like this:</p>
  
  <pre><code>export const getIsFetching = (state, filter) =&gt;
    fromTodo.getIsFetching(state.todo);
  </code></pre>
  
  <p>only at this point, the component is able to use <code>getIsFetching</code> without worring about the state shape.</p>
  
  <p>However, this raises my concern which is all the selectors directly used by components must live in the top-level reducer.</p>
  
  <p><strong>Update 2</strong>: essentially we are exporting selectors from the deepest level all the way up to the top-level reducers, while all the exports in the intermediate reducers are not using them, but they are there because the reducer knows the shape of the state at that level. </p>
  
  <p>It is very much like passing <code>props</code> from parent all the way down to children, while the intermediate component aren't using <code>props</code>. We avoided this by <code>context</code>, or <code>connect</code>.</p>
  
  <p>apologize for the poor English.</p>