Connecting Components with the useSelector Hook

Showcase how to use useSelector hook from React-Redux 9 to read state in a component, replacing the mapStateToProps function.
import React from 'react';
import { useSelector } from 'react-redux';

function UserProfile() {
  // Use useSelector hook to access the state
  const user = useSelector((state) => state.user);

  return (
      <h1>User Profile</h1>
      <p>Name: {}</p>
      <p>Age: {user.age}</p>
      <p>Email: {}</p>

export default UserProfile;
This piece of JavaScript code illustrates the usage of the useSelector hook from React-Redux to read state within a React functional component. The UserProfile function component accesses the 'user' slice from the global state using useSelector and displays its properties in the rendered output.
<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>User Profile</title>
  <div id="root"></div>
  <!-- Here your React app will be mounted -->
This is the HTML template where the React application will mount. The DIV with the id 'root' is the mounting point for the React application.
body {
  font-family: 'Arial', sans-serif;

div {
  margin: 20px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 4px;

h1 {
  color: #333;

p {
  color: #666;
This CSS provides basic styling for the UserProfile component, making use of font definitions, margins, padding, borders, and colors to present the user information in a more readable format.