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.