Selectors for derived state in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a selector that gets the list of users from the state.

Angular

export const selectUsers = createSelector([1], (state) => state.users);

Drag options to blanks, or click blank then click option'

AselectAppState

BselectUserState

CselectAllUsers

DselectFeature

Attempts:

3 left

💡 Hint

Common Mistakes

Using a selector that points to the whole app state instead of the user slice.

Confusing selector names that do not exist.

The selector needs to start from the user state slice, which is accessed by selectUserState.

2fill in blank

medium

Complete the code to create a selector that counts the number of completed tasks.

Angular

export const selectCompletedCount = createSelector(selectTasks, (tasks) => tasks.filter(task => task.completed [1] true).length);

Drag options to blanks, or click blank then click option'

A===

B!==

C>

D<

Attempts:

3 left

💡 Hint

Common Mistakes

Using inequality operator which filters out completed tasks.

Using greater or less than operators which do not apply to booleans.

The filter should check if task.completed is exactly true to count completed tasks.

3fill in blank

hard

Fix the error in the selector that tries to get the active user by ID.

Angular

export const selectActiveUser = createSelector(selectUsers, (users, [1]) => users.find(user => user.id === props.activeUserId));

Drag options to blanks, or click blank then click option'

Aprops

Bstate

Cparams

Dcontext

Attempts:

3 left

💡 Hint

Common Mistakes

Using state or params which are not valid parameters here.

Not passing any parameter and causing runtime errors.

The second argument to the projector function is props, which contains parameters like activeUserId.

4fill in blank

hard

Fill both blanks to create a selector that returns tasks filtered by a dynamic status.

Angular

export const selectTasksByStatus = createSelector(selectTasks, (tasks, [1]) => tasks.filter(task => task.status [2] props.status));

Drag options to blanks, or click blank then click option'

Aprops

Bstate

C===

D!==

Attempts:

3 left

💡 Hint

Common Mistakes

Using state instead of props.

Using inequality operator which filters out matching tasks.

The selector uses props to get the status, and compares task.status with === to filter correctly.

5fill in blank

hard

Fill all three blanks to create a selector that returns the names of users older than a given age.

Angular

export const selectUserNamesOlderThan = createSelector(selectUsers, (users, [1]) => users.filter(user => user.age [2] props.minAge).map(user => user.[3]));

Drag options to blanks, or click blank then click option'

Aprops

B>

Cname

Dstate

Attempts:

3 left

💡 Hint

Common Mistakes

Using state instead of props.

Using wrong comparison operator like <.

Mapping to a wrong property instead of name.

The selector uses props to get minAge, filters users older than minAge using >, and maps to their name.