Improve docs and formatting (#4774)

* Add highlight to the changed lines

* Add highlight to the modified code in docs

* Add space to the beginning of comments that do not have one

* Fix typos

Author: aidinio

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

@@ -476,7 +476,7 @@ export const selectAllPosts = (state: RootState) => state.posts
 
 export const selectPostById = (state: RootState, postId: string) =>
   state.posts.find(post => post.id === postId)
-//highlight-end
+// highlight-end
 ```
 
 Note that the `state` parameter for these selector functions is the root Redux state object, as it was for the inlined anonymous selectors we wrote directly inside of `useAppSelector`.
@@ -497,7 +497,7 @@ export const PostsList = () => {
 
 ```tsx title="features/posts/SinglePostPage.tsx"
 // omit imports
-//highlight-next-line
+// highlight-next-line
 import { selectPostById } from './postsSlice'
 
 export const SinglePostPage = () => {
@@ -511,7 +511,7 @@ export const SinglePostPage = () => {
 
 ```ts title="features/posts/EditPostForm.tsx"
 // omit imports
-//highlight-next-line
+// highlight-next-line
 import { postUpdated, selectPostById } from './postsSlice'
 
 export const EditPostForm = () => {
@@ -894,11 +894,11 @@ Since `array.sort()` mutates the existing array, we need to make a copy of `stat
 
 ```tsx title="features/posts/PostsList.tsx"
 // Sort posts in reverse chronological order by datetime string
-//highlight-start
+// highlight-start
 const orderedPosts = posts.slice().sort((a, b) => b.date.localeCompare(a.date))
 
 const renderedPosts = orderedPosts.map(post => {
-  //highlight-end
+  // highlight-end
   return (
     // omit rendering logic
   )

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

@@ -335,7 +335,7 @@ const initialState: PostsState = {
   status: 'idle',
   error: null
 }
-//highlight-end
+// highlight-end
 
 const postsSlice = createSlice({
   name: 'posts',
@@ -413,7 +413,7 @@ import { createSlice, nanoid, PayloadAction } from '@reduxjs/toolkit'
 import { client } from '@/api/client'
 
 import type { RootState } from '@/app/store'
-//highlight-next-line
+// highlight-next-line
 import { createAppAsyncThunk } from '@/app/withTypes'
 
 // omit other imports and types

docs/tutorials/essentials/part-7-rtk-query-basics.md

@@ -747,9 +747,11 @@ export const PostsList = () => {
   if (isLoading) {
     content = <Spinner text="Loading..." />
   } else if (isSuccess) {
+    // highlight-start
     const renderedPosts = sortedPosts.map(post => (
       <PostExcerpt key={post.id} post={post} />
     ))
+    // highlight-end
 
     // highlight-start
     const containerClassname = classnames('posts-container', {

docs/tutorials/essentials/part-8-rtk-query-advanced.md

@@ -117,7 +117,9 @@ export const EditPostForm = () => {
     )
   }
 
+  // highlight-start
   const onSavePostClicked = async (
+  // highlight-end
     e: React.FormEvent<EditPostFormElements>
   ) => {
     // Prevent server submission
@@ -410,7 +412,7 @@ export interface User {
   name: string
 }
 
-// omit `fetchSlice` and `usersSlice`
+// omit `fetchUsers` and `usersSlice`
 
 // highlight-start
 const emptyUsers: User[] = []
@@ -646,9 +648,9 @@ The last component that is reading from the old `postsSlice` is `<UserPage>`, wh
 
 The `useQuery` hooks always take the cache key argument as the first parameter, and if you need to provide hook options, that must always be the second parameter, like `useSomeQuery(cacheKey, options)`. In this case, the `getUsers` endpoint doesn't have any actual cache key argument. Semantically, this is the same as a cache key of `undefined`. So, in order to provide options to the hook, we have to call `useGetUsersQuery(undefined, options)`.
 
-We can use `selectFromResult` to have `<UserPage>` read just a filtered list of posts from the cache. However, in order for `selectFromResult` to avoid unnecessary re-renders, we need to ensure that whatever data we extract is memoized correctly. To do this, we should create a new selector instance that the `<UsersPage>` component can reuse every time it renders, so that the selector memoizes the result based on its inputs.
+We can use `selectFromResult` to have `<UserPage>` read just a filtered list of posts from the cache. However, in order for `selectFromResult` to avoid unnecessary re-renders, we need to ensure that whatever data we extract is memoized correctly. To do this, we should create a new selector instance that the `<UserPage>` component can reuse every time it renders, so that the selector memoizes the result based on its inputs.
 
-```tsx title="features/users/UsersPage.tsx"
+```tsx title="features/users/UserPage.tsx"
 import { Link, useParams } from 'react-router-dom'
 // highlight-start
 import { createSelector } from '@reduxjs/toolkit'

docs/tutorials/fundamentals/part-3-state-actions-reducers.md

@@ -581,7 +581,7 @@ export default function todosReducer(state = initialState, action) {
         }
       })
     }
-    //highlight-end
+    // highlight-end
     default:
       return state
   }

docs/usage/ServerRendering.md

@@ -55,7 +55,7 @@ import App from './containers/App'
 const app = Express()
 const port = 3000
 
-//Serve static files
+// Serve static files
 app.use('/static', Express.static('static'))
 
 // This is fired every time the server side receives a request

docs/usage/UsageWithTypescript.md

@@ -300,10 +300,10 @@ type RootState = ReturnType<typeof rootReducer>;
 Switching the type definition of `RootState` with Redux Toolkit example:
 
 ```ts
-//instead of defining the reducers in the reducer field of configureStore, combine them here:
+// instead of defining the reducers in the reducer field of configureStore, combine them here:
 const rootReducer = combineReducers({ counter: counterReducer })
 
-//then set rootReducer as the reducer object of configureStore
+// then set rootReducer as the reducer object of configureStore
 const store = configureStore({
   reducer: rootReducer,
   middleware: getDefaultMiddleware =>
@@ -608,7 +608,7 @@ If you need to modify the types of the `thunkApi` parameter, such as supplying t
 
 ```ts
 const fetchUserById = createAsyncThunk<
-  //highlight-start
+  // highlight-start
   // Return type of the payload creator
   MyData,
   // First argument to the payload creator

docs/usage/migrating-to-modern-redux.mdx

@@ -311,7 +311,7 @@ const todosSlice = createSlice({
 // `createSlice` automatically generated action creators with these names.
 // export them as named exports from this "slice" file
 export const { todoAdded, todoToggled } = todosSlice.actions
-//highlight-end
+// highlight-end
 
 // Export the slice reducer as the default export
 export default todosSlice.reducer