- User goes to /posts
- User goes to /authors/1
- User goes to /posts
- User goes to /authors/1
- User goes to /authors/2
- User goes to /posts
In both Example 1 and Example 2 the 3rd route is /posts
. In both scenarios, when the user gets to step 3 the state of the store will be kinda similar (there will be some posts in there), but different (they might be the posts we
fetched for the authors, or thye might be the ones we fetched for list on the /posts
page.
Store State in Example 1 - step 3
{
posts: {
/// the data for author 1's posts and author 2's posts
}
}
Store State in Example 2 - step 3
{
posts: {
/// the data for author 1's posts and the first page of "all posts"
}
}
When /posts
loads, I need to figure out if I have the right data for this page or not, right?
componentWillMount () {
// 1. If there are no `posts` in the store, this is easy, fetch the data for this page
// 2. If there are some posts in the store, how do I know if
// I'm in *Example 1* (I have all the data I need)
// or if I'm in *Example 2* (I don't have all the data I need)
}
I'm not sure what criteria you use to order posts? How do you determine what posts are on page 1 vs page 2 etc. Will you have sorting/filtering?
How many posts will you have? Could you download the minimal data for all posts (id, authorId, sortField?) and then just flesh them out as necessary? So, for example, when posts page 2 is requested, send the post ids to the server that don't have all their data. Same when an author page is requested and the author posts don't have all their data (or are stale).