Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Docs: Fix incorrect useSelector usage in 'PostsList' Component; Updat…
…e part-6-performance-normalization.md

In line 1218, the error is that this component is using the plain (untyped) useSelector hook:

  const orderedPostIds = useSelector(selectPostIds)

which is inconsistent with the recommended best practice of using the typed useAppSelector hook for Redux Toolkit with TypeScript.

While it is supposed to be importing/using the already typed UseAppSelector from @/app/hooks:

import { useAppSelector, useAppDispatch } from '@/app/hooks':

// Corrected Version:

  const orderedPostIds = useAppSelector(selectPostIds)



MORE DETAILS:

Description
This pull request fixes a bug in the documentation for the "Redux Essentials" tutorial. The PostsList component example was using the untyped useSelector hook, which is inconsistent with the recommended best practice of using the typed useAppSelector hook for Redux Toolkit with TypeScript.
Problem
In the PostsList component, the following line uses the standard useSelector hook:
typescript
const orderedPostIds = useSelector(selectPostIds)

This is incorrect because the tutorial, in the app/hooks.ts file, specifically sets up and promotes the use of typed hooks (useAppSelector and useAppDispatch) to ensure type safety. Following the incorrect example could lead to TypeScript errors in a real application.

Solution
This change replaces the incorrect useSelector with the correct useAppSelector to align the code with the established best practices of the tutorial.

Before
typescript
// ...
export const PostsList = () => {
  const dispatch = useDispatch()
  const orderedPostIds = useSelector(selectPostIds) // Incorrect
  // ...
}

After
typescript
// ...
import { useAppSelector, useAppDispatch } from '../../app/hooks' // assuming hooks are in this relative path

export const PostsList = () => {
  const dispatch = useAppDispatch()
  const orderedPostIds = useAppSelector(selectPostIds) // Correct
  // ...
}

Why this change is important
•	Consistency: Ensures the tutorial code is consistent with its own setup, which explicitly requires the use of typed hooks for TypeScript.
•	Accuracy: Prevents confusion and potential type-related issues for developers following the tutorial.
•	Best Practice: Reinforces the proper usage of Redux Toolkit in a typed environment, which is a core benefit of the library.
  • Loading branch information
BonaventureCJ authored Sep 15, 2025
commit 9573d520c12ab5a21064ec0d49e963e7d1cb71c8
Original file line number Diff line number Diff line change
Expand Up @@ -1215,7 +1215,7 @@ function PostExcerpt({ postId }: PostExcerptProps) {
export const PostsList = () => {
const dispatch = useDispatch()
// highlight-next-line
const orderedPostIds = useSelector(selectPostIds)
const orderedPostIds = useAppSelector(selectPostIds)

// omit other selections and effects

Expand Down