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.