0
0
Angularframework~10 mins

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

Choose your learning style9 modes available
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
StepActionInput StateSelector OutputNotes
1Store initialized{ items: [{id:1, done:false}, {id:2, done:true}] }N/AInitial state with 2 items
2selectItems called{ items: [...] }[{id:1, done:false}, {id:2, done:true}]Selector reads items array
3selectCompletedItems called[{id:1, done:false}, {id:2, done:true}][{id:2, done:true}]Filters items where done is true
4Component subscribesDerived state: [{id:2, done:true}]Component receives updated listComponent updates view
5State changes: add {id:3, done:true}{ items: [..., {id:3, done:true}] }N/ANew item added to state
6selectItems called{ items: [...] }[{id:1, done:false}, {id:2, done:true}, {id:3, done:true}]Selector reads updated items
7selectCompletedItems 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
8Component updatesDerived state updatedComponent view updates with 2 completed itemsReactive update
9ExitNo further changesN/AExecution stops when no state changes
💡 Execution stops when no new state changes trigger selectors
Variable Tracker
VariableStartAfter Step 2After Step 3After Step 5After Step 7Final
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 outputN/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 outputN/AN/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
Test your understanding
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?
AStep 2
BStep 4
CStep 6
DStep 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?
AIt would remain the same
BIt would include the new item
CIt would become empty
DIt 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.