Actions and reducers pattern in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is an action in the Actions and reducers pattern?

An action is a simple object that describes what happened in the app. It usually has a type property and may carry extra data called payload.

beginner

What role does a reducer play in state management?

A reducer is a pure function that takes the current state and an action, then returns a new state. It decides how the state changes based on the action.

intermediate

Why should reducers be pure functions?

Reducers must be pure to ensure predictable state changes. They should not modify inputs or cause side effects like API calls or random values.

intermediate

How do actions and reducers work together in Angular's state management?

Actions describe events, and reducers listen to these actions to update the state accordingly. This keeps state changes clear and traceable.

advanced

What is a common pattern to organize actions and reducers in Angular apps?

Use @ngrx/store library to define actions with createAction and reducers with createReducer. This helps keep code clean and maintainable.

What does an action object usually contain?

A A UI component

B Only the new state

C A function to update state

D A type and optional payload

Actions describe what happened with a type and may carry extra data as payload.

What must a reducer function NOT do?

A Return a new state

B Modify the current state directly

C Use the action to decide state changes

D Be a pure function

Reducers should never modify the current state directly; they must return a new state object.

In Angular, which library is commonly used for actions and reducers?

A RxJS

B Angular Material

C @ngrx/store

D NgBootstrap

@ngrx/store provides tools to define actions and reducers for state management.

What is the main benefit of using actions and reducers?

A Easier to track and manage state changes

B Faster UI rendering

C Automatic API calls

D Simplifies CSS styling

Actions and reducers make state changes clear and predictable, improving app maintainability.

Which of these is NOT part of the actions and reducers pattern?

A Services

B Reducers

C State

D Actions

Services are separate from the actions and reducers pattern, which focuses on actions, reducers, and state.

Explain how actions and reducers work together to manage state in an Angular app.

Think about how a message (action) tells the app what changed, and the reducer decides how to update the state.

Describe why reducers must be pure functions and what could go wrong if they are not.

Consider what happens if a function changes data outside itself or depends on random values.

Practice

1. In Angular's actions and reducers pattern, what is the main role of an action?

easy

A. To describe what happened and carry data about the event

B. To directly update the UI components

C. To store the entire application state

D. To fetch data from the server

Solution

1. Step 1: Understand the purpose of actions

   Actions are simple objects that describe an event that happened in the app and carry any necessary data.

2. Step 2: Differentiate from other parts

   Reducers handle state changes, not actions. UI updates and data fetching are separate concerns.

3. Final Answer:

   To describe what happened and carry data about the event -> Option A

4. Quick Check:

   Action = event description + data [OK]

Hint: Actions describe events, reducers change state [OK]

Common Mistakes:

• Confusing actions with reducers
• Thinking actions update UI directly
• Assuming actions hold the whole state

2. Which of the following is the correct syntax to define an action using Angular's createAction function?

easy

A. const loadItems = createAction('Load Items', payload);

B. const loadItems = createAction = 'Load Items';

C. const loadItems = actionCreate('Load Items');

D. const loadItems = createAction('Load Items');

Solution

1. Step 1: Recall createAction syntax

   The correct syntax is calling createAction with a string describing the action type.

2. Step 2: Check each option

   const loadItems = createAction('Load Items'); matches the correct syntax. const loadItems = createAction = 'Load Items'; uses wrong assignment. const loadItems = actionCreate('Load Items'); uses wrong function name. const loadItems = createAction('Load Items', payload); incorrectly adds a second argument without proper structure.

3. Final Answer:

   const loadItems = createAction('Load Items'); -> Option D

4. Quick Check:

   createAction('type') is correct [OK]

Hint: createAction takes a single string type [OK]

Common Mistakes:

• Using wrong function names
• Assigning createAction instead of calling it
• Passing payload directly as second argument

3. Given this reducer snippet, what will be the new state after dispatching { type: 'increment' } if the initial state is { count: 0 }?

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

medium

A. { count: 1 }

B. { count: 0 }

C. { count: -1 }

D. undefined

Solution

1. Step 1: Identify the action type and initial state

   The action type is 'increment' and initial state has count 0.

2. Step 2: Follow reducer logic for 'increment'

   The reducer returns a new state with count increased by 1, so count becomes 1.

3. Final Answer:

   { count: 1 } -> Option A

4. Quick Check:

   increment adds 1 to count [OK]

Hint: Reducer returns new state based on action type [OK]

Common Mistakes:

• Returning old state instead of updated
• Confusing increment with decrement
• Expecting mutation instead of new object

4. What is wrong with this reducer code snippet?

function todoReducer(state = [], action) {
  if (action.type = 'add') {
    return [...state, action.payload];
  }
  return state;
}

medium

A. State should be an object, not an array

B. Missing default case in the reducer

C. Using assignment (=) instead of comparison (===) in the if condition

D. Reducer should not return a new array

Solution

1. Step 1: Check the if condition syntax

   The condition uses single equals (=) which assigns instead of compares. This causes a bug.

2. Step 2: Verify other parts

   Default case is handled by returning state. State as array is valid for todo list. Returning new array is correct for immutability.

3. Final Answer:

   Using assignment (=) instead of comparison (===) in the if condition -> Option C

4. Quick Check:

   Use '===' for comparison in conditions [OK]

Hint: Use '===' for comparisons, not '=' [OK]

Common Mistakes:

• Confusing '=' with '===' in conditions
• Thinking default case is missing
• Believing state must be an object

5. You want to add a new feature to reset the counter state to zero using actions and reducers. Which of these is the best way to implement the reset action and update the reducer accordingly?

hard

A. Add case 'reset': state.count = 0; return state; directly in reducer without action

B. Define const reset = createAction('reset'); and add case 'reset': return { count: 0 }; in reducer

C. Define const reset = createAction('reset', () => 0); and return 0 in reducer

D. Use dispatch({ type: 'reset', count: 0 }) and ignore reducer changes

Solution

1. Step 1: Define the reset action properly

   Use createAction with a string type 'reset' to define the action.

2. Step 2: Update reducer to handle reset

   Add a case for 'reset' that returns a new state object with count set to 0, ensuring immutability.

3. Final Answer:

   Define const reset = createAction('reset'); and add case 'reset': return { count: 0 }; in reducer -> Option B

4. Quick Check:

   Action + reducer case resets state immutably [OK]

Hint: Create action and return new state in reducer [OK]

Common Mistakes:

• Mutating state directly in reducer
• Ignoring reducer update for new action
• Misusing createAction with payload function