Comprehensive Guide to Redux Toolkit: For Beginners

Utilizing the useSelector Hook in React-Redux

In this section of our comprehensive Redux Toolkit guide, we will explore the useSelector hook, a crucial tool for accessing state maintained in the Redux store. We'll implement this in a practical example to understand how to retrieve and display state values in React components.

Accessing State with useSelector

Importing useSelector: First, import useSelector from react-redux. This hook allows us to extract data from the Redux store:
```
 import { useSelector } from 'react-redux';
```
Using useSelector in a Component: Inside your component, such as CakeView, use useSelector to select a piece of state:
```
 const CakeView = () => {
   const numberOfCakes = useSelector(state => state.cake.numberOfCakes);

   return (
     <div>
       <h2>Number of Cakes: {numberOfCakes}</h2>
       // Rest of the component
     </div>
   );
 };
```
In this example, useSelector accepts a function known as a selector. This function takes the entire Redux state as its argument and returns the part of the state we're interested in – in this case, the number of cakes.

Applying useSelector to Another Component

Implementing in IceCreamView: Follow a similar approach for the IceCreamView component:

 const IceCreamView = () => {
   const numberOfIceCreams = useSelector(state => state.iceCream.numberOfIceCreams);

   return (
     <div>
       <h2>Number of Ice Creams: {numberOfIceCreams}</h2>
       // Rest of the component
     </div>
   );
 };

Here, the useSelector hook extracts the number of ice creams from the ice cream slice of the Redux store.

Observing the Output

Upon navigating to your React application in the browser, you should see the state values (numberOfCakes and numberOfIceCreams) displayed as part of the respective components. This demonstrates successful retrieval of state from the Redux store using the useSelector hook.

Conclusion

The useSelector hook in React-Redux offers a streamlined and efficient way to read data from the Redux store. It acts as a wrapper around store.getState, allowing React components to access and display specific parts of the application state. In the next part of this series, we will explore how to dispatch actions to the Redux store, specifically focusing on the functionality of the order and restock buttons in our application. Stay tuned for more practical insights on harnessing the power of Redux Toolkit in React apps.

Comprehensive Guide to Redux Toolkit: For Beginners - Part 1

Comprehensive Guide to Redux Toolkit: For Beginners - Part 2

Comprehensive Guide to Redux Toolkit: For Beginners - Part 3

Comprehensive Guide to Redux Toolkit: For Beginners - Part 4

Comprehensive Guide to Redux Toolkit: For Beginners - Part 5

Comprehensive Guide to Redux Toolkit: For Beginners - Part 6

Comprehensive Guide to Redux Toolkit: For Beginners - Part 7

Comprehensive Guide to Redux Toolkit: For Beginners - Part 8

Comprehensive Guide to Redux Toolkit: For Beginners - Part 9

Comprehensive Guide to Redux Toolkit: For Beginners - Part 10

Comprehensive Guide to Redux Toolkit: For Beginners - Part 11

Comprehensive Guide to Redux Toolkit: For Beginners - Part 12