Using Selector Functions to Retrieve State

Present a use case where useSelector hook is utilized in a React component to extract data from the Redux store.

import { useSelector } from 'react-redux';

function UserProfile() {
  // Using useSelector to extract data (user profile) from the Redux store
  const userProfile = useSelector(state => state.user.profile);

  return (
    <div>
      <h1>User Profile</h1>
      <p>Name: {userProfile.name}</p>
      <p>Email: {userProfile.email}</p>
      {/* render additional profile details */}
    </div>
  );
}

This code defines a React component named UserProfile. It uses the useSelector hook from the 'react-redux' library to access data from the Redux store. Specifically, it retrieves the user profile data from the 'user.profile' slice of the state and then renders this data in the component.