title: Redux: Better way for private/public selectors
body: <p>As <a href="https://egghead.io/lessons/javascript-redux-colocating-selectors-with-reducers" rel="nofollow noreferrer">this course</a> suggests, private selectors are <strong>repeated</strong> as public selectors to be used on the full state.</p>
  
  <ul>
  <li>Private selectors used on slice.</li>
  <li>Public selectors used on full state.</li>
  </ul>
  
  <p>But this will result in:</p>
  
  <ul>
  <li>Repeating code</li>
  <li>Flooding the the namespace of the public selectors</li>
  </ul>
  
  <p><strong>Is there a better way to organize selectors?</strong></p>
  
  <h2>Original example:</h2>
  
  <p>Root Reducer &amp; public selector:</p>
  
  <pre><code>// reducers/index.js
  import todos, * as fromTodos from './todos';
  
  // Reducer
  export default combineReducers({
      todos
  });
  
  // Private selector
  getVisibleTodos(state, filter) {
      return fromTodos.getVisibleTodos(state.todos, filter);
  }
  </code></pre>
  
  <p>Slice Reducer &amp; private selector:</p>
  
  <pre><code>// reducers/todos.js
  
  // Reducer
  export default (state, action) =&gt; {
      switch(action.type){
      case 'ADD_TODO':
          // ...
          break;
      // Handle other actions ...
      }
  }
  
  // Private selector
  getVisibleTodos(state, filter) {
      switch(filter) {
      case 'all':
          return todos;
      case 'completed':
          return state.filter(t =&gt; t.completed);
      // Other cases ...
      }
  }
  </code></pre>
  
  <p>Using the selector:</p>
  
  <pre><code>const mapStateToProps = (state, {params}) =&gt; ({
      todos: getVisibleTodos(state, params.filter || 'all')
  });
  </code></pre>