Change AppThunk definition for better typing (#185)

Reference:
reduxjs/rtk-github-issues-example#1

Author: markerikson

docs/tutorials/advanced-tutorial.md

@@ -514,7 +514,7 @@ Since the thunk middleware is already set up, we don't have to do any work there
 
 Before we go any further, let's add a type declaration we can reuse instead.
 
-> - [Add AppThunk type](https://github.com/markerikson/rsk-github-issues-example/commit/9ba637353d40667dc13eb650d132bee0445eff5d)
+> - [Add AppThunk type](https://github.com/markerikson/rsk-github-issues-example/commit/2ac93bb089705847a8ce349864d885a5039eff4b)
 
 **app/store.ts**
 
@@ -528,27 +528,23 @@ Before we go any further, let's add a type declaration we can reuse instead.
 
 export type AppDispatch = typeof store.dispatch
 
-+export type AppThunk = ActionCreator<
-+  ThunkAction<void, RootState, null, Action<string>>
-+>
++export type AppThunk = ThunkAction<void, RootState, null, Action<string>
 ```
 
-The `AppThunk` type declares that:
+The `AppThunk` type declares that the "action" that we're using is specifically a thunk function. The thunk is customized with some additional type parameters:
 
-- This function is an "action creator" (which takes some arguments, and returns a specific action type)
-- The "action" that we're returning is specifically a thunk function. The thunk is customized with some additional type parameters:
-  1. Return value: the thunk doesn't return anything
-  2. State type for `getState`: returns our `RootState` type
-  3. "Extra argument": the thunk middleware can be customized to pass in an extra value, but we aren't doing that in this app
-  4. Action types accepted by `dispatch`: any action whose `type` is a string.
+1. Return value: the thunk doesn't return anything
+2. State type for `getState`: returns our `RootState` type
+3. "Extra argument": the thunk middleware can be customized to pass in an extra value, but we aren't doing that in this app
+4. Action types accepted by `dispatch`: any action whose `type` is a string.
 
 There are many cases where you would want different type settings here, but these are probably the most common settings. This way, we can avoid repeating that same type declaration every time we write a thunk.
 
 #### Adding the Repo Details Slice
 
 Now that we have that type, we can write a slice of state for fetching details on a repo.
 
-> - [Add a slice for storing repo details](https://github.com/markerikson/rsk-github-issues-example/commit/f4d5a1840028b645c600eecc3f8297e5cc6a6b93)
+> - [Add a slice for storing repo details](https://github.com/markerikson/rsk-github-issues-example/commit/da9291bf428a96c3f2e8862f42e3be08461d514c)
 
 **features/repoSearch/repoDetailsSlice.ts**
 
@@ -591,10 +587,10 @@ export const {
 
 export default repoDetails.reducer
 
-export const fetchIssuesCount: AppThunk = (
+export const fetchIssuesCount = (
   org: string,
   repo: string
-) => async dispatch => {
+): AppThunk => async dispatch => {
   try {
     const repoDetails = await getRepoDetails(org, repo)
     dispatch(getRepoDetailsSuccess(repoDetails))
@@ -609,7 +605,7 @@ The first part of this should look straightforward. We declare our slice state s
 Down at the bottom, we have our first data fetching thunk. The important things to notice here are:
 
 - **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, but because we defined the `AppThunk` type as "an action creator that returns a thunk function", we need to apply that type to the action creator function. TS won't currently allow us to declare a type for a function declared with the `function` keyword, so we use an arrow function. (If we changed `AppThunk` to be just the "thunk function" part, we could write `function fetchIssuesCount() : AppThunk` as the return value instead.)
+- **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**.
 
@@ -619,7 +615,7 @@ While not shown, we also add the slice reducer to our root reducer.
 
 Now that the repo details slice exists, we can use it in the `<IssuesListPage>` component.
 
-> - [Update IssuesListPage to fetch repo details via Redux](https://github.com/markerikson/rsk-github-issues-example/commit/798a9bcf38eef1a1e5857057352c7b9e0a20cbcd)
+> - [Update IssuesListPage to fetch repo details via Redux](https://github.com/markerikson/rsk-github-issues-example/commit/964134a00bc1a54ba8758ca274049c9174e88f9a)
 
 **features/issuesList/IssuesListPage.tsx**
 
@@ -698,7 +694,7 @@ Inside our `useEffect`, we drop the `fetchIssueCount` function, and dispatch `fe
 
 Next up, we need to replace the logic for fetching a list of open issues.
 
-> - [Add a slice for tracking issues state](https://github.com/markerikson/rsk-github-issues-example/commit/43679930bfec13a6105337b5d8733980e200ceb5)
+> - [Add a slice for tracking issues state](https://github.com/markerikson/rsk-github-issues-example/commit/b2e5919651a5076e3857da96321bc979a8ae54b9)
 
 **features/issuesList/issuesSlice.ts**
 
@@ -777,11 +773,11 @@ export const {
 
 export default issues.reducer
 
-export const fetchIssues: AppThunk = (
+export const fetchIssues = (
   org: string,
   repo: string,
   page?: number
-) => async dispatch => {
+): AppThunk => async dispatch => {
   try {
     dispatch(getIssuesStart())
     const issues = await getIssues(org, repo, page)
@@ -791,11 +787,11 @@ export const fetchIssues: AppThunk = (
   }
 }
 
-export const fetchIssue: AppThunk = (
+export const fetchIssue = (
   org: string,
   repo: string,
   number: number
-) => async dispatch => {
+): AppThunk => async dispatch => {
   try {
     dispatch(getIssueStart())
     const issue = await getIssue(org, repo, number)
@@ -815,7 +811,7 @@ This slice is a bit longer, but it's the same basic approach as before: write th
 
 Now we can finish converting the `<IssuesListPage>` component by swapping out the issues fetching logic.
 
-> - [Update IssuesListPage to fetch issues data via Redux](https://github.com/markerikson/rsk-github-issues-example/commit/87ee62d93cff3b8686ee5a774a389e681423ab01)
+> - [Update IssuesListPage to fetch issues data via Redux](https://github.com/markerikson/rsk-github-issues-example/commit/8dbdc0726ccecf354a01351786196648c752c0a6)
 
 Let's look at the changes.
 
@@ -954,7 +950,7 @@ It's very similar to `<IssuesListPage>`. We store the current displayed `Issue`,
 
 We conveniently already have the Redux logic for fetching a single issue - we wrote that already as part of `issuesSlice.ts`. So, we can immediately jump straight to using that here in `<IssueDetailsPage>`.
 
-> - [Update IssueDetailsPage to fetch issue data via Redux](https://github.com/markerikson/rsk-github-issues-example/commit/a57fe3f97ccb26ee2c481c2f71057a58c7fd4dad)
+> - [Update IssueDetailsPage to fetch issue data via Redux](https://github.com/markerikson/rsk-github-issues-example/commit/46bcddbe1078574fab649a13f61a6bf3d0f42839)
 
 **features/issueDetails/IssueDetailsPage.tsx**
 
@@ -1019,7 +1015,7 @@ Interestingly, there's actually a bit of a change in behavior here. The original
 
 We have one more slice left to write - we need to fetch and store comments for the current issue.
 
-> - [Add a slice for tracking comments data](https://github.com/markerikson/rsk-github-issues-example/commit/e765f09b44a75cb99b3e2866e3ff2806a533620f)
+> - [Add a slice for tracking comments data](https://github.com/markerikson/rsk-github-issues-example/commit/46bcddbe1078574fab649a13f61a6bf3d0f42839)
 
 **features/issueDetails/commentsSlice.ts**
 
@@ -1074,7 +1070,7 @@ export const {
 } = comments.actions
 export default comments.reducer
 
-export const fetchComments: AppThunk = (issue: Issue) => async dispatch => {
+export const fetchComments = (issue: Issue): AppThunk => async dispatch => {
   try {
     dispatch(getCommentsStart())
     const comments = await getComments(issue.comments_url)
@@ -1091,7 +1087,7 @@ The slice should look pretty familiar at this point. Our main bit of state is a
 
 The final step is to swap the comments fetching logic in `<IssueDetailsPage>`.
 
-> - [Update IssueDetailsPage to fetch comments via Redux](https://github.com/markerikson/rsk-github-issues-example/commit/0977da34631088981f58f9d160573d83d4225238)
+> - [Update IssueDetailsPage to fetch comments via Redux](https://github.com/markerikson/rsk-github-issues-example/commit/9d1246a4d89f21da1f0e5377f040bc766e1fc0fd)
 
 **features/issueDetails/IssueDetailsPage.tsx**
 
@@ -1177,6 +1173,6 @@ Hopefully you now have a solid understand of how Redux Starter Kit looks in a re
 
 Let's wrap this up with one more look at the complete source code and the running app:
 
-<iframe src="https://codesandbox.io/embed/rsk-github-issues-example-03-final-m55m4?fontsize=14&module=%2Fsrc%2Ffeatures%2FissueDetails%2FcommentsSlice.ts&view=editor" title="rsk-github-issues-example-03-final" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
+<iframe src="https://codesandbox.io/embed/rsk-github-issues-example-03-final-yz8ip?fontsize=14&module=%2Fsrc%2Ffeatures%2FissueDetails%2FcommentsSlice.ts&view=editor" title="rsk-github-issues-example-03-final" allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
 
 Now, go out there and build something!