Redux selectors in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What does this selector return?

Given the Redux state below, what will the selector selectCompletedTodos return?

React Native

const state = {
  todos: [
    { id: 1, text: 'Buy milk', completed: true },
    { id: 2, text: 'Walk dog', completed: false },
    { id: 3, text: 'Read book', completed: true }
  ]
};

const selectCompletedTodos = state => state.todos.filter(todo => todo.completed);

A [{ id: 1, text: 'Buy milk', completed: true }, { id: 3, text: 'Read book', completed: true }]

B [{ id: 2, text: 'Walk dog', completed: false }]

C [{ id: 1, text: 'Buy milk', completed: false }, { id: 3, text: 'Read book', completed: false }]

D []

💡 Hint

Look for todos where completed is true.

The selector filters todos to only those with completed set to true, so it returns the first and third todos.

🧠 Conceptual

intermediate

Why use selectors in Redux?

Which of the following is the main benefit of using selectors in a Redux app?

A They help extract and compute derived data from the Redux state efficiently.

B They replace reducers to update the state directly.

C They store the entire app state in local storage.

D They dispatch actions to modify the store.

💡 Hint

Think about how selectors help with reading state.

Selectors are functions that read and compute data from the Redux state, often improving performance by memoizing results.

📝 Syntax

advanced

Identify the correct selector syntax

Which option correctly defines a memoized selector using Reselect to get the count of completed todos?

React Native

import { createSelector } from 'reselect';

const selectTodos = state => state.todos;

A

const selectCompletedCount = createSelector(
  todos => todos.filter(todo => todo.completed).length
);

B

const selectCompletedCount = createSelector(
  state => state.todos,
  todos => todos.filter(todo => todo.completed)
);

C

const selectCompletedCount = createSelector(
  selectTodos,
  todos => todos.completed.length
);

D

const selectCompletedCount = createSelector(
  selectTodos,
  todos => todos.filter(todo => todo.completed).length
);

💡 Hint

createSelector takes input selectors and a result function.

Option D correctly uses createSelector with an input selector and a function that returns the count of completed todos.

❓ lifecycle

advanced

When are selectors recomputed?

Given a memoized selector created with Reselect, when will it recompute its output?

A Only when the component using it mounts.

B Only when the input state slices it depends on change.

C Every time any action is dispatched, regardless of state changes.

D When the Redux store is initialized.

💡 Hint

Memoization avoids recomputing if inputs are unchanged.

Memoized selectors recompute only when their input selectors return new values, improving performance.

🔧 Debug

expert

Why does this selector cause a runtime error?

Consider this selector code. Why does it cause a runtime error when the state.todos is undefined?

React Native

const selectCompletedTodos = state => state.todos.filter(todo => todo.completed);

A Because todo.completed is not a valid property.

B Because filter is not a function on arrays.

C Because state.todos is undefined, calling filter on undefined causes a TypeError.

D Because the selector must be asynchronous.

💡 Hint

Check what happens if state.todos is missing.

If state.todos is undefined, calling filter on it throws a TypeError since undefined has no filter method.