Screenshots and sandboxes for Parts 4 and 5

Author: markerikson

docs/tutorials/essentials/part-4-using-data.md

@@ -1474,8 +1474,8 @@ Here's what our app looks like after all these changes:
 
 <iframe
   class="codesandbox"
-  src="https://codesandbox.io/embed/github/reduxjs/redux-essentials-example-app/tree/checkpoint-2-reactionButtons/?codemirror=1&fontsize=14&hidenavigation=1&theme=dark&runonclick=1"
-  title="redux-essentials-example-app"
+  src="https://codesandbox.io/embed/github/reduxjs/redux-essentials-example-app/tree/2b5a8361da115296107975a59155bc52a040d0a1?fontsize=14&hidenavigation=1&module=%2fsrc%2Ffeatures%2Fposts%2FpostsSlice.ts&theme=dark&runonclick=1"
+  title="redux-essentials-example"
   allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
   sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
 ></iframe>

docs/tutorials/essentials/part-5-async-logic.md

@@ -563,19 +563,19 @@ export const PostsList = () => {
 
 And with that, we should now see a fresh list of posts showing up after we log in to our app!
 
-**[TODO] Lorem ipsum screenshot here**
+![List of fetched posts](/img/tutorials/essentials/posts-fetched.png)
 
 #### Avoiding Duplicate Fetches
 
 The good news is we've successfully fetched those post objects from our mock server API.
 
 Unfortunately, we've got a problem. Right now our posts list is showing duplicates of each post:
 
-**[TODO] Duplicate post screenshot here**
+![Duplicate post items](/img/tutorials/essentials/posts-duplicates.png)
 
 In fact, if we look at the Redux DevTools, we can see _two_ sets of `'pending'` and `'fulfilled'` actions were dispatched:
 
-**[TODO] Duplicate actions screenshot here**
+![Duplicate fetchPosts actions](/img/tutorials/essentials/devtools-posts-duplicate.png)
 
 Why is that? Didn't we just add a check for `postStatus === 'idle'`? Shouldn't that be enough to make sure we only dispatch the thunk once?
 
@@ -627,9 +627,11 @@ export const fetchPosts = createAppAsyncThunk(
 
 Now when we reload the page and look at the `<PostsList>`, we should only see one set of posts, with no duplicates, and we should only see one set of dispatched actions in the Redux DevTools.
 
+**You don't _need_ to add `condition` to all thunks**, but there may be times it's useful to ensure only one request gets made at a time.
+
 :::tip
 
-Note that RTK Query will manage this for you! It deduplicates requests across _all_ components, so that each request only happens once, and you don't have to worry about doing this yourself.
+Note that [RTK Query will manage this for you!](./part-7-rtk-query-basics.md) It deduplicates requests across _all_ components, so that each request only happens once, and you don't have to worry about doing this yourself.
 
 :::
 
@@ -883,8 +885,6 @@ Remember, **the `create` callback syntax is optional!** The only time you _have_
 
 We're now fetching and displaying our list of posts. But, if we look at the posts, there's a problem: they all now say "Unknown author" as the authors:
 
-**[TODO] Update screenshot here**
-
 ![Unknown post authors](/img/tutorials/essentials/posts-unknownAuthor.png)
 
 This is because the post entries are being randomly generated by the fake API server, which also randomly generates a set of fake users every time we reload the page. We need to update our users slice to fetch those users when the application starts.
@@ -1108,8 +1108,8 @@ Here's what our app looks like now that we're fetching data from that fake API:
 
 <iframe
   class="codesandbox"
-  src="https://codesandbox.io/embed/github/reduxjs/redux-essentials-example-app/tree/checkpoint-3-postRequests/?codemirror=1&fontsize=14&hidenavigation=1&theme=dark&runonclick=1"
-  title="redux-essentials-example-app"
+  src="https://codesandbox.io/embed/github/reduxjs/redux-essentials-example-app/tree/58da61f83f6461e51e168a0d08c7fd7c9c9a5092?fontsize=14&hidenavigation=1&module=%2fsrc%2Ffeatures%2Fposts%2FpostsSlice.ts&theme=dark&runonclick=1"
+  title="redux-essentials-example"
   allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
   sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
 ></iframe>