Custom Selector Functions

Create custom selector functions with specific return types for extracting data from the Redux store, ensuring consistent types across components.

// Selector function to get a user's name from the Redux store
// Ensure the returned type is a string or null
const selectUserName = (state) => state.user.name;

// Selector function to get a list of user's friends from the Redux store
// Ensure the returned type is an array
const selectUserFriends = (state) => state.user.friends || [];

// Selector function to get the user's age from the Redux store
// Ensure the returned type is a number or null
const selectUserAge = (state) => state.user.age;

This JavaScript snippet defines three custom selector functions intended for use with a Redux store. Each selector ensures that the returned data from the store is of a consistent type. 'selectUserName' returns a user's name as a string, 'selectUserFriends' returns a list of the user's friends (always as an array, defaulting to an empty array if not present), and 'selectUserAge' retrieves the user's age, which is expected to be a number.

<!-- HTML structure for displaying the user data -->
<div id="userData">
  <h1>User Name: <span id="userName"></span></h1>
  <p>Age: <span id="userAge"></span></p>
  <p>Friends:</p>
  <ul id="userFriends"></ul>
</div>

This is an HTML structure that provides placeholders to display a user's name, age, and a list of friends, with corresponding IDs used to inject the data using JavaScript.

/* CSS for styling the user data display */
#userData {
  border: 1px solid #ccc;
  padding: 10px;
  margin: 10px;
}

#userName, #userAge, #userFriends {
  color: #333;
}

The CSS styles are designed to format the display of the user data within a bordered box, including styling for the text color of the user's name, age, and friends list.

// Usage of selector functions along with sample Redux state
// Assume Redux state shape looks like:
// { user: { name: 'Alice', age: 30, friends: ['Bob', 'Charlie'] } }

const state = {
  user: {
    name: 'Alice',
    age: 30,
    friends: ['Bob', 'Charlie']
  }
};

// Extracting values using selectors
const userName = selectUserName(state);
const userAge = selectUserAge(state);
const userFriends = selectUserFriends(state);

// Accessing the HTML elements
const userNameElement = document.getElementById('userName');
const userAgeElement = document.getElementById('userAge');
const userFriendsElement = document.getElementById('userFriends');

// Injecting the data into the HTML
userNameElement.textContent = userName;
userAgeElement.textContent = userAge;
userFriendsElement.innerHTML = userFriends.map(friend => `<li>${friend}</li>`).join('');

This JavaScript snippet demonstrates how to use the previously defined selector functions to extract the user's name, age, and friends list from a sample Redux state. It then selects corresponding HTML elements by ID and populates them with the extracted data, ensuring the UI is consistent with the store's state.