Solution:Step 1: Initial stateThe initial state is { value: 10 }.Step 2: Action dispatchedThe action is { type: 'add', payload: 5 }.Step 3: Reducer logicFor 'add', the reducer returns { value: state.value + action.payload }, so 10 + 5 = 15.Final Answer:{ value: 15 } -> Option BQuick Check:Reducer up

[Solved] Given this reducer:const initialState = { value: 10 }; function valueReducer(state = initialState, action) { switch(action.... } }What will be the state after dispatching { type: 'add', payload: 5 }? | Angular

Angular - State Management

Given this reducer:

const initialState = { value: 10 };
function valueReducer(state = initialState, action) {
  switch(action.type) {
    case 'add':
      return { value: state.value + action.payload };
    case 'subtract':
      return { value: state.value - action.payload };
    default:
      return state;
  }
}

What will be the state after dispatching { type: 'add', payload: 5 }?

A{ value: 5 }

B{ value: 15 }

C{ value: 10 }

D{ value: 0 }

Step-by-Step Solution

Solution:

Step 1: Initial state
The initial state is { value: 10 }.
Step 2: Action dispatched
The action is { type: 'add', payload: 5 }.
Step 3: Reducer logic
For 'add', the reducer returns { value: state.value + action.payload }, so 10 + 5 = 15.
Final Answer:
{ value: 15 } -> Option B
Quick Check:
Reducer updates state by adding payload [OK]

Quick Trick: Reducer returns new state with updated value [OK]

Common Mistakes:

Ignoring the payload value
Returning old state instead of updated
Confusing add and subtract cases

Master "State Management" in Angular

9 interactive learning modes - each teaches the same concept differently

Learn Why Deep Visual Try Challenge Project Recall Perf

More Angular Quizzes

Given this reducer:

Step 1: Initial state

Step 2: Action dispatched

Step 3: Reducer logic

Final Answer:

Quick Check:

Want More Practice?