Hone logo
Hone
Problems

Implementing Selectors with Props in Angular for Enhanced Data Retrieval

This challenge focuses on building robust and reusable data retrieval logic within an Angular application using selectors with props. Selectors with props allow you to derive data from the store based on input parameters, making your components more flexible and testable. You'll be implementing a selector that retrieves a specific user's details from a store, filtering based on a provided user ID.

Problem Description

You are tasked with creating an Angular selector that retrieves user data from a NgRx store. The selector should accept a userId as a prop and return the details of the user with that ID. If no user with the given ID exists in the store, the selector should return null. The store contains an array of user objects, each with an id and a name property.

What needs to be achieved:

  • Create an Angular selector that accepts a userId prop.
  • Retrieve the user object from the NgRx store based on the provided userId.
  • Return the user object if found, otherwise return null.

Key Requirements:

  • The selector must be pure (no side effects).
  • The selector must be memoized to prevent unnecessary computations.
  • The selector must be compatible with NgRx selectors.
  • The selector should handle the case where the user is not found.

Expected Behavior:

When the component using the selector changes the userId prop, the selector should re-execute and return the corresponding user data. If the userId remains the same, the selector should return the cached result. If the user with the given userId is not found in the store, the selector should return null.

Edge Cases to Consider:

  • userId is null or undefined. Should return null.
  • The store is empty (no users). Should return null.
  • The userId is not a valid number. While the challenge doesn't explicitly require validation, consider how your selector would behave. For simplicity, assume the userId will always be a valid number.

Examples

Example 1:

Input: userId = 1
Store: [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }]
Output: { id: 1, name: 'Alice' }
Explanation: The selector finds the user with id 1 and returns their details.

Example 2:

Input: userId = 3
Store: [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }]
Output: null
Explanation: The selector does not find a user with id 3 and returns null.

Example 3:

Input: userId = null
Store: [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }]
Output: null
Explanation: The selector receives a null userId and returns null.

Constraints

  • The selector must be written in TypeScript.
  • The selector must be compatible with NgRx version 8 or higher.
  • The selector should be memoized using createSelector from @ngrx/selectors.
  • The store state is assumed to have a property called users which is an array of { id: number, name: string }.
  • Performance: The selector should be efficient and avoid unnecessary iterations.

Notes

  • You'll need to import createSelector from @ngrx/selectors.
  • Consider how to handle the case where the store is not yet loaded (e.g., data is still being fetched). For this challenge, assume the store always contains the users array, even if it's empty.
  • Focus on the core logic of the selector. You don't need to create a full Angular application or NgRx store for this challenge. Just provide the selector function itself.
  • Think about how to make your selector reusable and testable.
Loading editor...
typescript