NgRx store concept in Angular - Deep Dive

Overview - NgRx store concept

What is it?

NgRx Store is a way to manage and keep track of data in Angular apps. It acts like a big container that holds the app's state, which means all the important data lives in one place. This helps different parts of the app share and update data in a clear and organized way. It uses a pattern called Redux, which makes sure data changes happen in a predictable manner.

Why it matters

Without NgRx Store, managing data in big Angular apps can get messy and confusing. Different parts might change data in unexpected ways, causing bugs and making the app hard to fix or improve. NgRx Store solves this by making data flow clear and controlled, so developers can build apps that are easier to understand, test, and maintain. This leads to better user experiences and faster development.

Where it fits

Before learning NgRx Store, you should understand basic Angular concepts like components, services, and data binding. Knowing JavaScript functions and how data flows in apps helps too. After mastering NgRx Store, you can explore advanced state management topics like effects for handling side effects, selectors for efficient data access, and entity management for handling collections.

Mental Model

Core Idea

NgRx Store is a single, organized place where your app's data lives and changes happen in a clear, step-by-step way.

Think of it like...

Imagine a library where all books (data) are kept in one big room (store). Whenever someone wants to add, remove, or change a book, they must follow a clear rulebook (actions and reducers) so everyone knows what happened and the library stays neat.

┌───────────────┐       ┌───────────────┐       ┌───────────────┐
│   Component   │──────▶│    Action     │──────▶│   Reducer     │
└───────────────┘       └───────────────┘       └───────────────┘
                                │                       │
                                ▼                       ▼
                          ┌───────────────┐       ┌───────────────┐
                          │   Store       │◀──────│   New State   │
                          └───────────────┘       └───────────────┘

Build-Up - 7 Steps

1

Foundation

Understanding Application State

Concept: Learn what 'state' means in an app and why keeping track of it matters.

In any app, 'state' is the data that describes what the app looks like and what it knows right now. For example, a shopping cart's items or a user's login status are parts of state. Managing this state well means the app behaves correctly and shows the right information.

Result

You can identify what data your app needs to remember and why it must be managed carefully.

Understanding state is the first step to managing data flow and avoiding confusion in your app.

2

Foundation

Introducing Single Source of Truth

Concept: Discover why having one place to keep all app data helps avoid bugs and confusion.

Instead of letting many parts of the app keep their own copies of data, NgRx Store keeps all data in one place called the store. This means every part of the app looks at the same data source, so they stay in sync and changes are easier to track.

Result

You see how centralizing data prevents mismatches and makes debugging easier.

Knowing that one source of truth simplifies data flow and reduces errors.

3

Intermediate

Actions: The Only Way to Change State

🤔Before reading on: Do you think components can change state directly or only through actions? Commit to your answer.

Concept: Learn that state changes happen only by sending messages called actions.

In NgRx Store, components or services don’t change data directly. Instead, they send an 'action' describing what happened, like 'Add Item' or 'User Logged In'. This action is a plain object with a type and optional data.

Result

You understand that actions are clear signals that something should change, making changes predictable.

Knowing that actions are the only way to change state helps keep data flow clear and traceable.

4

Intermediate

Reducers: Pure Functions Updating State

🤔Before reading on: Do you think reducers modify the existing state or create a new one? Commit to your answer.

Concept: Reducers take the current state and an action, then return a new state without changing the old one.

Reducers are simple functions that decide how state changes based on the action received. They never change the original state but return a new copy with updates. This makes state changes predictable and easy to track.

Result

You see how reducers keep state changes pure and safe from accidental bugs.

Understanding reducers as pure functions is key to predictable and testable state management.

5

Intermediate

Selectors: Reading State Efficiently

Concept: Selectors help parts of the app get just the data they need from the store.

Selectors are functions that pick specific pieces of data from the store. They can combine or transform data too. Using selectors helps components get data without knowing the store’s full structure and improves performance by avoiding unnecessary updates.

Result

You can access state data cleanly and efficiently in your app.

Knowing selectors improves app performance and keeps components simple.

6

Advanced

Effects: Handling Side Effects Safely

🤔Before reading on: Do you think side effects like API calls should happen inside reducers or separately? Commit to your answer.

Concept: Effects listen for actions and perform tasks like fetching data, then dispatch new actions with results.

Reducers must stay pure and not do things like API calls. Effects handle these side effects by reacting to actions, doing the work (like calling a server), and then sending new actions with the results. This keeps state changes clean and side effects organized.

Result

You can manage asynchronous tasks without breaking the rules of state management.

Separating side effects from reducers keeps state predictable and easier to debug.

7

Expert

Immutable State and Performance Optimization

🤔Before reading on: Do you think mutating state directly or creating new copies affects app performance? Commit to your answer.

Concept: Immutable state means never changing existing data but always creating new copies, which helps detect changes efficiently.

NgRx Store relies on immutability so it can quickly check if state changed by comparing references. This allows Angular to update only what’s needed. Mutating state directly breaks this and can cause bugs or slow updates. Tools like Immer can help write immutable updates more easily.

Result

You understand why immutability is crucial for performance and correctness in NgRx Store.

Knowing how immutability affects change detection helps avoid subtle bugs and improve app speed.

Under the Hood

NgRx Store keeps a single JavaScript object representing the app state. When an action is dispatched, the store calls the reducer with the current state and action. The reducer returns a new state object without modifying the old one. The store then updates its internal state and notifies all subscribers (like components) about the change. Effects listen for specific actions to perform asynchronous tasks and dispatch new actions when done. This flow ensures a clear, unidirectional data path and predictable state changes.

Why designed this way?

NgRx Store was designed to bring order to complex Angular apps where many components might change data unpredictably. Inspired by Redux from React, it enforces immutability and unidirectional data flow to make debugging and testing easier. Alternatives like two-way binding or scattered services were less predictable and harder to maintain in large apps. This design trades some initial complexity for long-term clarity and scalability.

┌───────────────┐       ┌───────────────┐       ┌───────────────┐
│  Component    │──────▶│   Dispatch    │──────▶│   Reducer     │
└───────────────┘       └───────────────┘       └───────────────┘
                                │                       │
                                ▼                       ▼
                          ┌───────────────┐       ┌───────────────┐
                          │    Store      │◀──────│  New State    │
                          └───────────────┘       └───────────────┘
                                │
                                ▼
                          ┌───────────────┐
                          │  Subscribers  │
                          └───────────────┘

Effects listen to actions and dispatch new actions asynchronously.

Myth Busters - 4 Common Misconceptions

Quick: Can reducers perform API calls directly? Commit to yes or no.

Common Belief: Reducers can do anything including API calls or complex logic.

Reality: Reducers must be pure functions without side effects; API calls belong in effects.

Why it matters: Putting side effects in reducers breaks predictability and can cause bugs that are hard to trace.

Quick: Is it okay to mutate the state object directly in reducers? Commit to yes or no.

Common Belief: It's fine to change the existing state object directly for performance.

Reality: State must be immutable; reducers return new state objects without modifying the old one.

Why it matters: Mutating state breaks change detection and can cause UI not to update properly.

Quick: Does NgRx Store automatically update components without selectors? Commit to yes or no.

Common Belief: Components can read state directly without selectors and still get efficient updates.

Reality: Selectors optimize data access and prevent unnecessary component updates.

Why it matters: Skipping selectors can lead to performance issues and harder-to-maintain code.

Quick: Is NgRx Store only useful for very large apps? Commit to yes or no.

Common Belief: NgRx Store is overkill for small or simple apps.

Reality: Even small apps benefit from predictable state management, but complexity tradeoffs exist.

Why it matters: Misjudging when to use NgRx can lead to unnecessary complexity or missed benefits.

Expert Zone

1

NgRx Store's strict immutability enables time-travel debugging, letting developers rewind and replay state changes.

2

Using feature modules with lazy loading in NgRx allows splitting state into smaller parts, improving app startup time.

3

Memoized selectors prevent expensive recalculations, but improper use can cause stale data or missed updates.

When NOT to use

NgRx Store is not ideal for very simple apps with minimal state or apps that don't require complex state sharing. Alternatives like Angular services with BehaviorSubjects or simpler state libraries may be better for small projects.

Production Patterns

In real apps, NgRx Store is combined with Effects for API calls, Entity adapters for managing collections, and Router Store for syncing URL state. Developers use strict typing with createAction and createReducer for safety and maintainability. Feature modules isolate state slices, and DevTools integration helps debug complex flows.

Connections

Redux (JavaScript library)

NgRx Store is inspired by Redux and follows the same core principles of unidirectional data flow and immutable state.

Understanding Redux helps grasp NgRx Store's design and why it enforces strict patterns.

Functional Programming

NgRx Store uses pure functions (reducers) and immutable data, key ideas from functional programming.

Knowing functional programming concepts clarifies why reducers must be pure and state immutable.

Supply Chain Management

Like a supply chain tracks goods through stages, NgRx Store tracks data changes through actions and reducers in a clear, stepwise process.

Seeing state changes as a controlled flow helps understand the importance of order and traceability.

Common Pitfalls

#1 Mutating state directly inside a reducer.

Wrong approach:

function reducer(state, action) {
state.items.push(action.payload);
return state;
}

Correct approach:

function reducer(state, action) {
return {...state, items: [...state.items, action.payload]};
}

Root cause:

Misunderstanding that state must be immutable and reducers must return new objects.

#2 Performing API calls inside reducers.

Wrong approach:

function reducer(state, action) {
fetch('/api/data').then(...);
return state;
}

Correct approach:

Use an effect to handle API calls and dispatch actions with results.

Root cause:

Confusing reducers with components or services that handle side effects.

#3 Not using selectors and accessing store state directly in components.

Wrong approach:

this.store.select(state => state.someFeature).subscribe(...);

Correct approach:

Create and use selectors: this.store.select(selectSomeFeature).subscribe(...);

Root cause:

Not realizing selectors optimize performance and encapsulate state structure.

Key Takeaways

NgRx Store centralizes app data in one place, making state management predictable and clear.

State changes only happen through actions and pure reducers, ensuring a controlled and testable flow.

Immutability is essential to detect changes and keep the UI in sync efficiently.

Effects separate side effects like API calls from pure state updates, keeping logic organized.

Using selectors improves performance and keeps components simple by providing focused data access.