Redux selectors in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to select the user name from the Redux state.

React Native

const userName = useSelector(state => state.user[1]name);

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

A.

B->

C:

D,

Attempts:

3 left

💡 Hint

Common Mistakes

Using arrow or colon instead of dot causes syntax errors.

Forgetting to access the nested property.

The dot . operator accesses the name property of the user object in the Redux state.

2fill in blank

medium

Complete the code to create a selector function that returns the list of todos from state.

React Native

const selectTodos = state => state.[1];

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

Atasks

BtodoList

Citems

Dtodos

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect property names like tasks or items.

Confusing the selector with an action creator.

The selector accesses todos property directly from the state object.

3fill in blank

hard

Fix the error in the selector to get completed todos only.

React Native

const selectCompletedTodos = state => state.todos.filter(todo => todo.[1] === true);

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

AisComplete

Bfinished

Ccompleted

Ddone

Attempts:

3 left

💡 Hint

Common Mistakes

Using property names that don't exist in todo objects.

Forgetting to compare to true.

The property completed is the standard boolean flag for completed todos.

4fill in blank

hard

Fill both blanks to create a memoized selector using reselect.

React Native

import { createSelector } from 'reselect';

const selectTodos = state => state.todos;

const selectCompletedTodos = createSelector(
  selectTodos,
  todos => todos.filter(todo => todo.[1] === [2])
);

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

Acompleted

Btrue

Cfalse

Ddone

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong property names or boolean values.

Not using createSelector correctly.

The selector filters todos where completed is true using createSelector for memoization.

5fill in blank

hard

Fill both blanks to create a selector that returns the count of active todos.

React Native

const selectActiveTodoCount = createSelector(
  state => state.todos,
  todos => todos.filter(todo => !todo.[1]).[2]
);

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

Acompleted

Blength

C+

D-

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong property names or operators.

Forgetting to negate the completed property.

The selector filters todos where completed is false, then gets the length of that filtered array.