Angular NgRx
Master Angular NgRx with Store, Actions, Reducers, Selectors, Effects, Entity, Signals integration, architecture diagrams, enterprise best practices, and interview questions.
As Angular applications grow larger, managing application state becomes increasingly complex.
Imagine managing:
- User Authentication
- Shopping Cart
- Customer Accounts
- Banking Transactions
- Notifications
- Theme Settings
- Dashboard Filters
Passing data between many components quickly becomes difficult.
NgRx solves this problem by providing a centralized, predictable state management solution inspired by the Redux pattern.
NgRx is widely used in enterprise Angular applications where scalability, maintainability, and predictable state updates are critical.
Table of Contents
- What is NgRx?
- Why Use NgRx?
- NgRx Architecture
- Core Building Blocks
- Store
- Actions
- Reducers
- Selectors
- Effects
- Entity
- Signals with NgRx
- Enterprise Banking Example
- Performance Best Practices
- Common Mistakes
- Top 10 Interview Questions
- Summary
What is NgRx?
NgRx is a reactive state management library built for Angular.
It uses:
- RxJS
- Immutable State
- Redux Pattern
- Unidirectional Data Flow
Instead of components directly modifying shared data,
all state changes go through a predictable workflow.
Why Use NgRx?
Without centralized state management:
- Duplicate data
- Difficult debugging
- Tight component coupling
- Complex communication
- Hard-to-track state changes
NgRx provides:
- Single Source of Truth
- Predictable updates
- Better debugging
- Time-travel debugging (with DevTools)
- Easier testing
- Scalable architecture
NgRx Architecture
flowchart LR
Component
Component --> Action
Action --> Effect
Effect --> API
API --> SuccessAction
SuccessAction --> Reducer
Reducer --> Store
Store --> Selector
Selector --> Component
NgRx Data Flow
flowchart TD
User
User --> Component
Component --> DispatchAction
DispatchAction --> Reducer
Reducer --> Store
Store --> Selector
Selector --> UI
Core Building Blocks
NgRx consists of:
- Store
- Actions
- Reducers
- Selectors
- Effects
- Entity
- DevTools
Each has a specific responsibility.
Store
The Store is the application's centralized state container.
export interface AppState{
users: User[];
orders: Order[];
loading: boolean;
}
Think of the Store as a read-only database for your application state.
Store Architecture
flowchart LR
Reducers --> Store
Store --> Selectors
Selectors --> Components
Actions
Actions describe what happened.
Examples
- Login
- Logout
- Load Customers
- Add Product
- Delete Order
Action Example
export const loadCustomers =
createAction(
'[Customer] Load Customers'
);
Actions never contain business logic.
Dispatching Actions
this.store.dispatch(
loadCustomers()
);
Action Flow
flowchart LR
ButtonClick
ButtonClick --> Dispatch
Dispatch --> Action
Action --> Reducer
Reducers
Reducers determine how state changes.
Reducers:
- Are pure functions
- Never call APIs
- Never mutate state
- Return new state
Example
export const customerReducer =
createReducer(
initialState,
on(
loadCustomersSuccess,
(state,{customers}) => ({
...state,
customers
})
)
);
Reducer Architecture
flowchart LR
Action --> Reducer
Reducer --> NewState
NewState --> Store
Selectors
Selectors retrieve state efficiently.
export const selectCustomers =
createSelector(
selectCustomerState,
state => state.customers
);
Benefits
- Memoization
- Reusability
- Better performance
Selector Flow
flowchart LR
Store
Store --> Selector
Selector --> Component
Effects
Effects handle asynchronous work.
Examples
- HTTP requests
- Authentication
- File uploads
- Notifications
- Logging
Example
loadCustomers$ = createEffect(() =>
this.actions$.pipe(
ofType(loadCustomers),
switchMap(() =>
this.api.getCustomers().pipe(
map(customers =>
loadCustomersSuccess({
customers
})
)
)
)
)
);
Effects keep reducers pure.
Effect Architecture
flowchart LR
Action
Action --> Effect
Effect --> API
API --> SuccessAction
SuccessAction --> Reducer
NgRx Entity
NgRx Entity simplifies collection management.
Instead of manually updating arrays,
Entity stores normalized data.
Example
interface CustomerState{
ids:number[];
entities:
Dictionary<Customer>;
}
Benefits
- Faster lookups
- Less boilerplate
- Easier CRUD operations
Entity Architecture
flowchart TD
API
API --> EntityAdapter
EntityAdapter --> Store
Store --> Selector
Signals with NgRx
Modern Angular allows NgRx state to work alongside Signals.
Example
customers =
toSignal(
this.store.select(
selectCustomers
)
);
Template
@for(
customer of customers();
track customer.id
){
{{ customer.name }}
}
Signals provide a cleaner template experience while NgRx remains the source of truth.
Signals + NgRx
flowchart LR
Store
Store --> Selector
Selector --> Signal
Signal --> Component
Enterprise Banking Example
Banking Dashboard
State
- Customer
- Accounts
- Cards
- Loans
- Investments
- Notifications
- Authentication
NgRx
- Store
- Effects
- Entity
- Selectors
Architecture
flowchart TD
Dashboard
Dashboard --> Dispatch
Dispatch --> Effects
Effects --> BankingAPI
BankingAPI --> Reducers
Reducers --> Store
Store --> Selectors
Selectors --> Signals
Signals --> Dashboard
Benefits
- Predictable updates
- Excellent scalability
- Easier debugging
- Centralized state
NgRx Folder Structure
store/
│
├── actions/
│ ├── customer.actions.ts
│ ├── auth.actions.ts
│
├── reducers/
│ ├── customer.reducer.ts
│ ├── auth.reducer.ts
│
├── selectors/
│ ├── customer.selectors.ts
│
├── effects/
│ ├── customer.effects.ts
│
├── models/
│
└── index.ts
Performance Best Practices
| Practice | Benefit |
|---|---|
| Keep reducers pure | Predictable state |
| Use selectors | Memoization |
| Normalize collections with Entity | Faster lookups |
| Use Effects for APIs | Cleaner reducers |
| Split feature state | Better scalability |
| Combine with Signals | Simpler templates |
| Use OnPush | Better rendering |
| Use DevTools | Easier debugging |
Common Mistakes
Calling APIs Inside Reducers
❌ Wrong
Reducers must remain pure.
Mutating State
❌ Wrong
state.users.push(user);
✅ Correct
return{
...state,
users:[
...state.users,
user
]
};
Storing Derived Data
Avoid storing values that can be computed.
Prefer Selectors.
Large Global State
Split state into feature slices.
Example
- Auth
- Customers
- Orders
- Payments
Overusing NgRx
Small applications often work well with:
- Signals
- Services
- RxJS
Use NgRx when centralized state management provides clear value.
NgRx vs Signals
| Feature | NgRx | Signals |
|---|---|---|
| Global State | ✅ Excellent | Limited |
| Local UI State | Possible | ✅ Excellent |
| Async Workflows | Effects | RxJS |
| Immutable State | ✅ Yes | Recommended |
| Boilerplate | Higher | Lower |
| Enterprise Apps | ✅ Excellent | Excellent (for local state) |
Advantages
| Feature | Benefit |
|---|---|
| Store | Single source of truth |
| Reducers | Predictable updates |
| Effects | Clean async handling |
| Selectors | Memoized reads |
| Entity | Efficient collections |
| DevTools | Excellent debugging |
Top 10 NgRx Interview Questions
1. What is NgRx?
Answer
NgRx is a reactive state management library for Angular based on the Redux pattern. It provides centralized, predictable state management using Store, Actions, Reducers, Selectors, and Effects.
2. What is the Store?
Answer
The Store is the centralized container that holds application state. Components read data from the Store and dispatch Actions instead of modifying state directly.
3. What are Actions?
Answer
Actions describe events that occurred in the application, such as loading customers or logging in. They are dispatched to initiate state changes.
4. What are Reducers?
Answer
Reducers are pure functions that receive the current state and an Action, then return a new immutable state.
5. What are Selectors?
Answer
Selectors retrieve and derive state from the Store efficiently. They are memoized, improving performance by avoiding unnecessary recalculations.
6. What are Effects?
Answer
Effects handle side effects such as HTTP requests, authentication, notifications, and logging. They keep reducers pure and dispatch new actions based on asynchronous results.
7. What is NgRx Entity?
Answer
NgRx Entity provides helper utilities for managing collections in a normalized format, reducing boilerplate and improving CRUD performance.
8. How do Signals work with NgRx?
Answer
Selectors can be converted into Signals using utilities such as toSignal(), allowing Angular templates to use Signal-based reactivity while NgRx continues managing global state.
9. When should you use NgRx?
Answer
NgRx is most beneficial for medium to large applications with complex shared state, multiple feature modules, and sophisticated asynchronous workflows.
10. What is the recommended enterprise architecture?
Answer
Use:
- NgRx Store for global state
- Effects for asynchronous operations
- Entity for large collections
- Selectors for efficient reads
- Signals for local template reactivity
- OnPush Change Detection for rendering performance
Interview Cheat Sheet
| Requirement | Recommended Solution |
|---|---|
| Global State | NgRx Store |
| User Actions | Actions |
| State Updates | Reducers |
| Async Operations | Effects |
| State Queries | Selectors |
| Collections | NgRx Entity |
| UI Reactivity | Signals |
| Change Detection | OnPush |
| Async APIs | RxJS |
| Enterprise Apps | NgRx + Signals |
Summary
NgRx provides a robust, scalable state management solution for Angular applications by implementing a predictable, unidirectional data flow. Through Store, Actions, Reducers, Selectors, Effects, and Entity, it simplifies managing complex shared state across large applications. Modern Angular applications often combine NgRx for global application state with Signals for local UI state, creating an architecture that is both scalable and highly performant.
Key Takeaways
- ✔ NgRx centralizes application state.
- ✔ The Store is the single source of truth.
- ✔ Actions describe what happened.
- ✔ Reducers are pure functions that return new immutable state.
- ✔ Effects handle asynchronous operations.
- ✔ Selectors provide efficient, memoized access to state.
- ✔ NgRx Entity simplifies collection management.
- ✔ Signals complement NgRx for local reactive UI state.
- ✔ Use OnPush with NgRx for better rendering performance.
- ✔ NgRx is one of the most frequently asked Angular interview topics.
Next Article
➡️ 97-Angular-Architecture-Best-Practices-QA.md