Skip to content

Commit 9573d52

Browse files
Docs: Fix incorrect useSelector usage in 'PostsList' Component; Update 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.
1 parent 6c8c3a1 commit 9573d52

File tree

1 file changed

+1
-1
lines changed

1 file changed

+1
-1
lines changed

docs/tutorials/essentials/part-6-performance-normalization.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1215,7 +1215,7 @@ function PostExcerpt({ postId }: PostExcerptProps) {
12151215
export const PostsList = () => {
12161216
const dispatch = useDispatch()
12171217
// highlight-next-line
1218-
const orderedPostIds = useSelector(selectPostIds)
1218+
const orderedPostIds = useAppSelector(selectPostIds)
12191219

12201220
// omit other selections and effects
12211221

0 commit comments

Comments
 (0)