Actions and reducers pattern in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this reducer function?

Consider this Angular reducer function handling a counter state. What will be the new state after dispatching the action { type: 'increment' } when the current state is { count: 5 }?

Angular

function counterReducer(state = { count: 0 }, action: { type: string }) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

const currentState = { count: 5 };
const newState = counterReducer(currentState, { type: 'increment' });
console.log(newState);

A undefined

B { count: 5 }

C { count: 4 }

D { count: 6 }

💡 Hint

Think about what the reducer does when it receives the 'increment' action.

The reducer adds 1 to the current count when the action type is 'increment'. Starting from 5, it returns 6.

📝 Syntax

intermediate

Which option correctly defines an action creator function in Angular?

Choose the correct syntax for an action creator function that returns an action object with type 'addItem' and a payload containing an item string.

A function addItem(item: string) { return { actionType: 'addItem', data: item }; }

B function addItem(item: string) { return { type: 'addItem', payload: item }; }

C function addItem(item: string) { return { type: addItem, payload: item }; }

D function addItem(item: string) { return { type: 'addItem', item }; }

💡 Hint

Look for the standard keys used in action objects.

Actions typically have a 'type' key and a 'payload' key for data. Option B follows this pattern correctly.

🔧 Debug

advanced

Why does this reducer cause an error?

Examine the reducer code below. Why will it cause an error when dispatched with any action?

Angular

function todoReducer(state = [], action: { type: string, payload?: string }) {
  switch (action.type) {
    case 'add':
      state.push(action.payload);
      return state;
    default:
      return state;
  }
}

A It does not handle the 'remove' action type.

B It uses an invalid switch statement syntax.

C It mutates the state array directly, which is not allowed in reducers.

D It returns undefined instead of a state object.

💡 Hint

Reducers should never change the original state directly.

Reducers must return a new state object without mutating the existing state. Using push changes the original array, which breaks this rule.

❓ state_output

advanced

What is the final state after these actions?

Given the reducer and the sequence of dispatched actions below, what is the final state?

Angular

function counterReducer(state = { count: 0 }, action: { type: string }) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    case 'reset':
      return { count: 0 };
    default:
      return state;
  }
}

let state = { count: 0 };
state = counterReducer(state, { type: 'increment' });
state = counterReducer(state, { type: 'increment' });
state = counterReducer(state, { type: 'decrement' });
state = counterReducer(state, { type: 'reset' });
state = counterReducer(state, { type: 'increment' });
console.log(state);

A { count: 1 }

B { count: 2 }

C { count: 0 }

D { count: 3 }

💡 Hint

Follow each action step by step and update the count.

The count goes 0 → 1 → 2 → 1 → 0 → 1 after each action respectively.

🧠 Conceptual

expert

Which statement best describes the role of actions in the reducer pattern?

Choose the most accurate description of what actions do in the actions and reducers pattern in Angular.

A Actions describe what happened and carry data to update the state accordingly.

B Actions store the entire application state for the reducer to use.

C Actions are functions that return the new state after processing.

D Actions directly modify the state to reflect user interactions.

💡 Hint

Think about the purpose of actions as messages.

Actions are plain objects that describe events and carry any needed data. They do not modify state themselves but tell reducers what to do.