React-Redux mapStateToProps vs passing down parent props : <p>This may come off as a bit of a naive question, but I am new to react-redux and I'm learning as I go.</p>

<p><strong>Context:</strong> Given that I have a react-redux application. In my <strong><em>top-level</em></strong> component I have this at the bottom:</p>

<pre><code>function mapStateToProps({ auth }) {
  return { auth };
}

export default connect(mapStateToProps)(newComponent);
</code></pre>

<p>The 'auth' portion comes from my reducer index.js file:</p>

<pre><code>import { combineReducers } from "redux";
import authReducer from "./authReducer";

export default combineReducers({
  auth: authReducer
});
</code></pre>

<p>So now this component has access to all the data that comes with auth, which in my application contains all the user information needed.</p>

<p>As my application got bigger I realized I needed the data from the authReducer in other components that were 1 or 2 layers down from the top-level component</p>

<p><strong>My question(s) are</strong>: Is it better practice to connect the top-level component with the auth reducer, and pass down the necessary information to child components? What if a child 100-layers down needed information from the authReducer, would we still pass it down layer by layer? </p>

<p>OR would we just connect the authReducer as I did above to each component that needs it? Would that be expensive to do repeatedly? </p>
