title: Using redux to initialize a global state then letting local component state take over
body: <p>This is more of a state design/best practices question with react and redux. </p>
  
  <p>I have an app which handles three kinds of data (albums, posts, profiles) and renders them all in a single component (ScrollGrid) that has infinite scroll functionality. This component grabs a "context" prop from the redux store and derives a gridContext from which sets the layout.</p>
  
  <p>The piece of redux state looks like this:</p>
  
  <pre><code>{ 
    context: "posts",
    pages: [[...],[...]],
    currentPage: 0,
    hasMorePages: true,
    isFetching: false,
    tabPosition: 0
  }
  </code></pre>
  
  <p>When my AppRouter components first mounts it fetches some feed "posts" data, sets that data in redux store, and passes it down to the ScrollGrid component. The ScrollGrid component can be nested several components down (and can interface with intermediary components in between).</p>
  
  <p>My question is once I have sent the initial data down to ScrollGrid,  is it good practice to just let the ScrollGrid component's local state handle this same state or should I always update the redux store and pass props down? I would be mimicking the redux state in local component state from then on and only re-initializing redux state and passing it back down if data type changes (post to albums for example).</p>