You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
0 commit comments