Suggest an edit

Improve this article

Refine the answer for “How does NgRx implement the Redux pattern?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

NgRx implements the **Redux** pattern in Angular style, with the same principles but expressed in the language of Angular's architecture.

Here's what that looks like:

### 1. **Single source of truth** (a single state store)

The entire application state is stored in `Store`, a single central object.
This is like one global state, just like in Redux.

### 2. **State is read-only**

Components cannot change the state directly.
They only dispatch `Actions` through `dispatch()`, just like in Redux: only through events.

### 3. **Changes through pure functions (`Reducer`)**

Reducers take the current state and an `Action`,
and return a **new** state.
This is the main rule of Redux: pure functions = predictability.

### 4. **Side effects separately (`Effects`)**

All asynchronous actions (for example, API requests) are moved into `Effects`.
This is like `redux-saga` or `redux-thunk`, just built on RxJS.

### 5. **Selectors (`Selectors`)**

To read the data you need from the store, you use `selectors`.
This is like `reselect` in Redux: performant, convenient, safe.

### The difference?

NgRx is built on **RxJS**, everything is reactive.
You work not with plain functions but with streams (`Observables`).

**Conclusion:**
NgRx is an adaptation of the Redux pattern for Angular: a clear structure, reactivity through RxJS, and strict control over state.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts207 words

For the reviewer

Visible only to the moderator. Helps review go faster.