Selectors for derived state in Angular - Step-by-Step Execution

Concept Flow - Selectors for derived state

Store holds state

↓

Define selector function

↓

Selector reads state

↓

Selector computes derived data

↓

Component subscribes to selector

↓

Component gets updated derived state

Selectors read the store state, compute derived data, and provide it to components reactively.

Execution Sample

Angular

const selectItems = (state) => state.items;
const selectCompletedItems = createSelector(
  selectItems,
  (items) => items.filter(item => item.done)
);

This code defines a selector that derives completed items from the store's items array.

Execution Table

Step	Action	Input State	Selector Output	Notes
1	Store initialized	{ items: [{id:1, done:false}, {id:2, done:true}] }	N/A	Initial state with 2 items
2	selectItems called	{ items: [...] }	[{id:1, done:false}, {id:2, done:true}]	Selector reads items array
3	selectCompletedItems called	[{id:1, done:false}, {id:2, done:true}]	[{id:2, done:true}]	Filters items where done is true
4	Component subscribes	Derived state: [{id:2, done:true}]	Component receives updated list	Component updates view
5	State changes: add {id:3, done:true}	{ items: [..., {id:3, done:true}] }	N/A	New item added to state
6	selectItems called	{ items: [...] }	[{id:1, done:false}, {id:2, done:true}, {id:3, done:true}]	Selector reads updated items
7	selectCompletedItems called	[{id:1, done:false}, {id:2, done:true}, {id:3, done:true}]	[{id:2, done:true}, {id:3, done:true}]	Selector recomputes filtered list
8	Component updates	Derived state updated	Component view updates with 2 completed items	Reactive update
9	Exit	No further changes	N/A	Execution stops when no state changes

💡 Execution stops when no new state changes trigger selectors

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 5	After Step 7	Final
state.items	[{id:1, done:false}, {id:2, done:true}]	[{id:1, done:false}, {id:2, done:true}]	[{id:1, done:false}, {id:2, done:true}]	[{id:1, done:false}, {id:2, done:true}, {id:3, done:true}]	[{id:1, done:false}, {id:2, done:true}, {id:3, done:true}]	[{id:1, done:false}, {id:2, done:true}, {id:3, done:true}]
selectItems output	N/A	[{id:1, done:false}, {id:2, done:true}]	[{id:1, done:false}, {id:2, done:true}]	[{id:1, done:false}, {id:2, done:true}, {id:3, done:true}]	[{id:1, done:false}, {id:2, done:true}, {id:3, done:true}]	[{id:1, done:false}, {id:2, done:true}, {id:3, done:true}]
selectCompletedItems output	N/A	N/A	[{id:2, done:true}]	N/A	[{id:2, done:true}, {id:3, done:true}]	[{id:2, done:true}, {id:3, done:true}]

Key Moments - 2 Insights

Why does the selector recompute only when the state changes?

Selectors are memoized; they return cached results if input state is unchanged, as shown between steps 2 and 3 versus steps 5 and 7 in the execution_table.

How does the component get updated derived data automatically?

The component subscribes to the selector's observable, so when the selector output changes (steps 4 and 8), the component receives new data and updates its view.

Visual Quiz - 3 Questions

Look at the execution_table at step 3, what does selectCompletedItems output?

A []

B [{id:1, done:false}]

C [{id:2, done:true}]

D [{id:1, done:false}, {id:2, done:true}]

💡 Hint

Check the 'Selector Output' column at step 3 in execution_table

At which step does the component first receive the derived completed items?

A Step 2

B Step 4

C Step 6

D Step 8

💡 Hint

Look for 'Component subscribes' and 'Component receives updated list' in execution_table

If a new item with done:false is added, how would selectCompletedItems output change?

A It would remain the same

B It would include the new item

C It would become empty

D It would throw an error

💡 Hint

Refer to variable_tracker for selectCompletedItems output after adding items with done:true vs done:false

Concept Snapshot

Selectors read store state and compute derived data.
They are memoized to avoid unnecessary recomputations.
Components subscribe to selectors to get reactive updates.
Use createSelector to combine selectors and compute filtered or transformed data.
Selectors improve performance and keep components simple.

Full Transcript

Selectors in Angular read the store's state and compute derived data like filtered lists. They are memoized functions that only recompute when their input state changes. Components subscribe to selectors to get reactive updates automatically when the derived data changes. This keeps components simple and efficient. The execution trace shows the store state, selector calls, outputs, and component updates step-by-step, illustrating how selectors provide derived state reactively.

Practice

1. What is the main purpose of using createSelector in Angular state management?

easy

A. To dispatch actions to the store

B. To directly modify the state values

C. To compute derived data from the state efficiently

D. To subscribe to HTTP requests

Solution

1. Step 1: Understand what createSelector does

   createSelector is used to create selectors that compute derived data from the state without modifying it.

2. Step 2: Differentiate from other store operations

   Modifying state or dispatching actions are done by reducers and actions, not selectors.

3. Final Answer:

   To compute derived data from the state efficiently -> Option C

4. Quick Check:

   Derived data = createSelector [OK]

Hint: Remember: selectors read and compute, not modify state [OK]

Common Mistakes:

• Confusing selectors with actions or reducers
• Thinking selectors modify state
• Assuming selectors handle side effects

2. Which of the following is the correct syntax to create a selector that derives the total count from a list in the state using createSelector?

easy

A. const selectTotal = createSelector(list => list.length, selectList);

B. const selectTotal = createSelector(selectList, list => list.length);

C. const selectTotal = createSelector(selectList, list => list.count);

D. const selectTotal = createSelector(selectList, list => list.size());

Solution

1. Step 1: Check the order of arguments in createSelector

   The first argument(s) are input selectors, followed by a projector function.

2. Step 2: Verify the projector function logic

   The projector function receives the selected data and returns the derived value. Using list.length correctly gets the count.

3. Final Answer:

   const selectTotal = createSelector(selectList, list => list.length); -> Option B

4. Quick Check:

   Input selectors first, then projector function [OK]

Hint: Input selectors first, projector function last in createSelector [OK]

Common Mistakes:

• Swapping input selectors and projector function order
• Using incorrect property like count or size()
• Calling methods instead of accessing properties

3. Given the following selectors:

const selectItems = (state) => state.items;
const selectCompletedItems = createSelector(selectItems, items => items.filter(item => item.done));

What will selectCompletedItems return if state.items is [{done: true}, {done: false}, {done: true}]?

medium

A. [{done: true}, {done: true}]

B. []

C. [{done: false}]

D. [{done: true}, {done: false}]

Solution

1. Step 1: Understand the input selector

   selectItems returns the full list of items from state.

2. Step 2: Apply the projector function filter

   The projector filters items where item.done is true, so it keeps only those objects.

3. Final Answer:

   [{done: true}, {done: true}] -> Option A

4. Quick Check:

   Filter done=true items = [{done:true}, {done:true}] [OK]

Hint: Filter returns only items matching condition [OK]

Common Mistakes:

• Including false done items in result
• Returning original list without filtering
• Confusing filter condition logic

4. Identify the error in this selector code:

const selectUsers = (state) => state.users;
const selectActiveUsers = createSelector(selectUsers, users => users.active);

medium

A. The projector function incorrectly accesses users.active instead of filtering

B. The input selector should return a property, not the whole state

C. createSelector requires at least two input selectors

D. The selector should be an async function

Solution

1. Step 1: Check the input selector

   selectUsers correctly returns state.users, which is valid.

2. Step 2: Analyze the projector function

   The projector accesses users.active, but users is likely an array, so it should filter or map, not access a property.

3. Final Answer:

   The projector function incorrectly accesses users.active instead of filtering -> Option A

4. Quick Check:

   Projector must handle data type correctly [OK]

Hint: Check if projector matches data type (array vs object) [OK]

Common Mistakes:

• Assuming users is an object, not an array
• Trying to access properties on arrays directly
• Misunderstanding projector function role

5. You want to create a selector that returns the number of completed tasks and the number of pending tasks from state.
Given:

const selectTasks = (state) => state.tasks;

Which of the following createSelector implementations correctly derives this data?

hard

A. const selectTaskCounts = createSelector(selectTasks, tasks => tasks.doneCount)

B. const selectTaskCounts = createSelector(selectTasks, tasks => { completed: tasks.filter(t => t.done).length, pending: tasks.filter(t => !t.done).length });

C. const selectTaskCounts = createSelector(selectTasks, tasks => [tasks.filter(t => t.done).length, tasks.filter(t => !t.done).length]);

D. const selectTaskCounts = createSelector(selectTasks, tasks => ({ completed: tasks.filter(t => t.done).length, pending: tasks.filter(t => !t.done).length }));

Solution

1. Step 1: Check the syntax of the projector function

   const selectTaskCounts = createSelector(selectTasks, tasks => ({ completed: tasks.filter(t => t.done).length, pending: tasks.filter(t => !t.done).length })); returns an object with properties completed and pending correctly using parentheses to return the object literal.

2. Step 2: Identify errors in other options

   const selectTaskCounts = createSelector(selectTasks, tasks => { completed: tasks.filter(t => t.done).length, pending: tasks.filter(t => !t.done).length }); lacks parentheses around the object, causing a syntax error. const selectTaskCounts = createSelector(selectTasks, tasks => [tasks.filter(t => t.done).length, tasks.filter(t => !t.done).length]); returns an array, not an object. const selectTaskCounts = createSelector(selectTasks, tasks => tasks.doneCount) accesses a non-existent property.

3. Final Answer:

   const selectTaskCounts = createSelector(selectTasks, tasks => ({ completed: tasks.filter(t => t.done).length, pending: tasks.filter(t => !t.done).length })); -> Option D

4. Quick Check:

   Use parentheses to return object literals in arrow functions [OK]

Hint: Wrap object in parentheses to return from arrow function [OK]

Common Mistakes:

• Missing parentheses around object literal
• Returning array instead of object
• Accessing undefined properties