Docs: Fix incorrect useSelector usage in 'PostsList' Component; Update part-6-performance-normalization

[BonaventureCJ]

…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.

Thanks for the PR!

To better assist you, please select the type of PR you want to create.
Docs Fix
Click the "Preview" tab above, and click on the link for the PR type:

• 🐛 Bug fix or new feature
• 📝 Documentation Fix
• 📖 New/Updated Documentation Content

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

[netlify]

✅ Deploy Preview for redux-docs ready!

Name	Link
🔨 Latest commit	9573d52
🔍 Latest deploy log	https://app.netlify.com/projects/redux-docs/deploys/68c82a4aed934d0008c817ca
😎 Deploy Preview	https://deploy-preview-4813--redux-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[markerikson]

Thanks!