Advanced tutorial: limit try blocks to API calls

docs/tutorials/advanced-tutorial.md

@@ -591,12 +591,14 @@ export const fetchIssuesCount = (
   org: string,
   repo: string
 ): AppThunk => async dispatch => {
+  let repoDetails
   try {
-    const repoDetails = await getRepoDetails(org, repo)
-    dispatch(getRepoDetailsSuccess(repoDetails))
+    repoDetails = await getRepoDetails(org, repo)
   } catch (err) {
     dispatch(getRepoDetailsFailed(err.toString()))
+    return
   }
+  dispatch(getRepoDetailsSuccess(repoDetails))
 }
 ```
 
@@ -607,7 +609,7 @@ Down at the bottom, we have our first data fetching thunk. The important things
 - **The thunk is defined separately from the slice**, since RSK currently has no special syntax for defining thunks as part of a slice.
 - **We declare the thunk action creator as an arrow function, and use the `AppThunk` type we just created.** You can use either arrow functions or the `function` keyword to write thunk functions and thunk action creators, so we could also have written this as `function fetchIssueCount() : AppThunk` instead.
 - **We use the `async/await` syntax for the thunk function itself.** Again, this isn't required, but `async/await` usually results in simpler code than nested Promise `.then()` chains.
-- **Inside the thunk, we dispatch the plain action creators that were generated by the `createSlice` call**.
+- **Inside the thunk, we dispatch the plain action creators that were generated by the `createSlice` call**. The dispatch is kept outside of the try block, to ensure that any exceptions thrown within the dispatched action don't get swallowed by the catch -- we only want to catch errors that occured performing the API call.
 
 While not shown, we also add the slice reducer to our root reducer.
 
@@ -778,27 +780,31 @@ export const fetchIssues = (
   repo: string,
   page?: number
 ): AppThunk => async dispatch => {
+  dispatch(getIssuesStart())
+  let issues
   try {
-    dispatch(getIssuesStart())
-    const issues = await getIssues(org, repo, page)
-    dispatch(getIssuesSuccess(issues))
+    issues = await getIssues(org, repo, page)
   } catch (err) {
     dispatch(getIssuesFailure(err.toString()))
+    return
   }
+  dispatch(getIssuesSuccess(issues))
 }
 
 export const fetchIssue = (
   org: string,
   repo: string,
   number: number
 ): AppThunk => async dispatch => {
+  dispatch(getIssueStart())
+  let issue
   try {
-    dispatch(getIssueStart())
-    const issue = await getIssue(org, repo, number)
-    dispatch(getIssueSuccess(issue))
+    issue = await getIssue(org, repo, number)
   } catch (err) {
     dispatch(getIssueFailure(err.toString()))
+    return
   }
+  dispatch(getIssueSuccess(issue))
 }
 ```
 
@@ -917,13 +923,15 @@ export const IssueDetailsPage = ({
 
   useEffect(() => {
     async function fetchIssue() {
+      setCommentsError(null)
+      let issue
       try {
-        setCommentsError(null)
-        const issue = await getIssue(org, repo, issueId)
-        setIssue(issue)
+        issue = await getIssue(org, repo, issueId)
       } catch (err) {
         setCommentsError(err)
+        return
       }
+      setIssue(issue)
     }
 
     fetchIssue()
@@ -987,13 +995,14 @@ export const IssueDetailsPage = ({
 
   useEffect(() => {
 -   async function fetchIssue() {
+-     setCommentsError(null)
+-     let issue
 -     try {
--       setCommentsError(null)
--       const issue = await getIssue(org, repo, issueId)
--       setIssue(issue)
+-       issue = await getIssue(org, repo, issueId)
 -     } catch (err) {
 -       setCommentsError(err)
 -     }
+-     setIssue(issue)
 -    }
 -    fetchIssue()
 +   if (!issue) {
@@ -1071,13 +1080,15 @@ export const {
 export default comments.reducer
 
 export const fetchComments = (issue: Issue): AppThunk => async dispatch => {
+  dispatch(getCommentsStart())
+  let comments
   try {
-    dispatch(getCommentsStart())
-    const comments = await getComments(issue.comments_url)
-    dispatch(getCommentsSuccess({ issueId: issue.number, comments }))
+    comments = await getComments(issue.comments_url)
   } catch (err) {
     dispatch(getCommentsFailure(err))
+    return
   }
+  dispatch(getCommentsSuccess({ issueId: issue.number, comments }))
 }
 ```