title: How to choose the Redux state shape for an app with list/detail views and pagination?
body: <p>Imagine I have a number of entries(say, users) in my database. I also have two routes, one for list, other for detail(where you can edit the entry). Now I'm struggling with how to approach the data structure. </p>
  
  <p>I'm thinking of two approaches and a kinda combination of both.</p>
  
  <h2>Shared data set</h2>
  
  <ul>
  <li>I navigate to <code>/list</code>, all of my users are downloaded from api a stored in redux store, under the key <code>users</code>, I also add some sort of  <code>users_offset</code> and <code>users_limit</code> to render only part of the of the list</li>
  <li>I then navigate to <code>/detail/&lt;id&gt;</code>, and store <code>currently_selected_user</code> with <code>&lt;id&gt;</code> as the val... which means I will be able to get my user's data with something like this <code>users.find(res =&gt; res.id === currently_selected_user)</code></li>
  <li>updating will be nice and easy as well, since I'm working with just one data set and detail pointing to it</li>
  <li>adding a new user also easy, again just working with the same list of users</li>
  </ul>
  
  <p>Now the problem I have with this approach is that, when the list of users gets huge(say millions), it might take a while to download. And also, when I navigate directly to <code>/detail/&lt;id&gt;</code>, I won't yet have all of my users downloaded, so to get data for just the one I need, I'm gonna have to first download the whole thing. Millions of users just to edit one.</p>
  
  <h2>Separated data set</h2>
  
  <ul>
  <li>I navigate to <code>/list</code>, and instead of downloading all of my users from api, I only download a couple of them, depending on what my <code>users_per_page</code> and <code>users_current_page</code> would be set to, and I'd probably store the data as <code>users_currently_visible</code></li>
  <li>I then navigate to <code>/detail/&lt;id&gt;</code>, store <code>currently_selected_user</code> with <code>&lt;id&gt;</code> as the val...and instead of searching through <code>users_currently_visible</code> I simply download user's data from api.. </li>
  <li>on update, I'm not gonna update <code>users_currently_visible</code> in any way</li>
  <li>nor will I on add</li>
  </ul>
  
  <p>What I see as possible problem here is that I'm gonna have to, upon visiting <code>/list</code>, download data from api again, because it might not be in sync with what's in the database, I also might be unnecessarily downloading users data in detail, because they might be incidentally already inside my <code>users_currently_visible</code></p>
  
  <h2>some sort of frankenstein-y shenanigans</h2>
  
  <ul>
  <li>I detail, I do the same as in <em>Separated data set</em> but instead of directly downloading user's data from api, I first check:
  
  <ul>
  <li>do I have any <code>users_currently_visible</code></li>
  <li>if so, is there a user with my id between them?
  if both are true, I then use it as my user data, otherwise I make the api call</li>
  </ul></li>
  <li>same happens on update, I check if my user exists between <code>users_currently_visible</code> if so, I also update that list, if not I do nothing</li>
  </ul>
  
  <p>This would probably work, but doesn't really feel like it's the proper way. I would also probably still need to download fresh list of <code>users_currently_visible</code> upon visiting <code>/list</code>, because I might have added a new one..</p>
  
  <p>Is there any fan favorite way of doing this?... I'm sure every single one redux user must have encountered the same things.</p>
  
  <p>Thanks!</p>